PageLoadingOverlay

Full-page hamster-wheel overlay shown while a client-side page swap is in flight.

Page Chrome

Idle (hidden)

/** @jsxRuntime automatic */ /** @jsxImportSource @takazudo/zfb/zudo-react */ // Story for PageLoadingOverlay — the full-page hamster-wheel overlay shown // during SPA soft-swap navigation (epic #1647, wave 6, gap batch #1661). // // The component has no props — visibility is driven entirely by // `usePageLoadingState()` context (`isPageLoading`). ForceLoading is a small // nested component that flips that flag true in a mount effect, mirroring the // base-dialog.stories.tsx wrapper pattern: Story.render only needs to // construct the vnode tree synchronously (see contract.test.ts), the effect // itself only runs once the styleguide preview actually mounts the tree in a // real browser. import { getScope } from '@takazudo/zfb/zudo-react'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { createPageLoadingState } from './page-loading-state-provider'; import { PageLoadingOverlay } from './page-loading-overlay'; const meta: StoryMeta = { title: 'PageLoadingOverlay', category: 'Page Chrome', description: 'Full-page hamster-wheel overlay shown while a client-side page swap is in flight.', usage: `import { PageLoadingStateProvider } from '@/components/shared/page-loading-state-provider';\nimport { PageLoadingOverlay } from '@/components/shared/page-loading-overlay';\n\n<PageLoadingStateProvider>\n <PageLoadingOverlay />\n</PageLoadingStateProvider>`, }; export default meta; function LoadingDemo() { const state = createPageLoadingState(); getScope().onActivate(() => { state.isPageLoading.value = true; }); return <PageLoadingOverlay state={state} />; } export const Idle = defineStory({ name: 'Idle (hidden)', render: () => ( <div class="text-zd-white text-sm"> <p class="pb-vgap-xs"> オーバーレイは isPageLoading が false のときは何も描画しません（以下は空）: </p> <PageLoadingOverlay /> </div> ), }); export const Loading = defineStory({ name: 'Loading', render: () => ( // PageLoadingOverlay is `fixed inset-0` (full viewport by design, not a // portal) — it fills the preview iframe directly rather than a wrapper box. <LoadingDemo /> ), });