PageLoadingOverlay

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

Page Chrome

Idle (hidden)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // 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 { useEffect } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PageLoadingStateProvider, usePageLoadingState } 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 ForceLoading() { const { setIsPageLoading } = usePageLoadingState(); useEffect(() => { setIsPageLoading(true); }, []); return null; } export const Idle = defineStory({ name: 'Idle (hidden)', render: () => ( <div className="text-zd-white text-sm"> <p className="pb-vgap-xs"> オーバーレイは isPageLoading が false のときは何も描画しません（以下は空）: </p> <PageLoadingStateProvider> <PageLoadingOverlay /> </PageLoadingStateProvider> </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. <PageLoadingStateProvider> <ForceLoading /> <PageLoadingOverlay /> </PageLoadingStateProvider> ), });