feat(hub-ui): extract iframe loading placeholder into a storied component

Author: antfubot

packages/hub-ui/src/client/components/views/ViewIframe.vue

@@ -8,6 +8,7 @@ import { DEVFRAME_REMOTE_ASSETS_ERROR_MESSAGE_TYPE, REMOTE_CONNECTION_KEY } from
 import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
 import { sharedStateToRef } from '../../state/docks'
 import ViewAssetsError from './ViewAssetsError.vue'
+import ViewIframeLoading from './ViewIframeLoading.vue'
 
 const props = defineProps<{
   context: DocksContext
@@ -383,15 +384,7 @@ onUnmounted(() => {
       ref="viewFrame"
       class="devframes-view-iframe relative w-full h-full flex-1 items-center justify-center"
     >
-      <div
-        v-if="showLoadingPlaceholder"
-        class="devframes-view-iframe-loading absolute inset-0 flex flex-col items-center justify-center gap-2 bg-base"
-      >
-        <div class="i-ph:circle-notch-duotone animate-spin text-3xl color-faint" />
-        <div class="text-sm color-muted">
-          Loading…
-        </div>
-      </div>
+      <ViewIframeLoading v-if="showLoadingPlaceholder" />
       <ViewAssetsError
         v-if="assetsError"
         :error="assetsError"

packages/hub-ui/src/client/components/views/ViewIframeLoading.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import ViewIframeLoading from './ViewIframeLoading.vue'
+
+// The placeholder fills its positioned parent (`absolute inset-0`), so the
+// stage mirrors the iframe view frame it renders into at runtime.
+function stage(children: any) {
+  return h('div', { class: 'relative h-100 bg-base color-base border border-base rounded-lg overflow-hidden font-sans' }, children)
+}
+
+const meta = {
+  title: 'Views/IframeLoading',
+  component: ViewIframeLoading,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Shown over an iframe view while it loads its content. A blank iframe paints white during load, so `ViewIframe` reveals this placeholder by hiding the pane — the same layering trick as the assets-error panel. It covers the initial load and any hard navigation or refresh.',
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Loading: Story = {
+  render: () => ({
+    setup: () => () => stage(h(ViewIframeLoading)),
+  }),
+}

packages/hub-ui/src/client/components/views/ViewIframeLoading.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// Placeholder shown while an iframe view loads its content. A blank iframe
+// paints white during load, so this is only visible once the pane steps aside
+// (`pane.hide()` in `ViewIframe`) — the same layering trick `ViewAssetsError`
+// relies on. It covers the initial load and any hard navigation/refresh.
+</script>
+
+<template>
+  <div class="devframes-view-iframe-loading absolute inset-0 flex flex-col items-center justify-center gap-2 bg-base">
+    <div class="i-ph:circle-notch-duotone animate-spin text-3xl color-faint" />
+    <div class="text-sm color-muted">
+      Loading…
+    </div>
+  </div>
+</template>