HamsterLoader

Signature hamster-wheel loading spinner.

Page Chrome

Default

In search-loading context

/** @jsxRuntime automatic */ /** @jsxImportSource @takazudo/zfb/zudo-react */ // Story for HamsterLoader — the signature loading spinner used by the search // page while results are in flight (epic #1647, wave 6, gap batch #1661). // Takes no props, so the two variants below differ by surrounding context // rather than by prop state — the bare component and its real usage inside // search-page-content.tsx. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { HamsterLoader } from './hamster-loader'; const meta: StoryMeta = { title: 'HamsterLoader', category: 'Page Chrome', description: 'Signature hamster-wheel loading spinner.', usage: `import { HamsterLoader } from '@/components/shared/hamster-loader';\n\n<HamsterLoader />`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => <HamsterLoader />, }); export const InSearchLoadingContext = defineStory({ name: 'In search-loading context', render: () => ( <div class="max-w-[820px] mx-auto pt-vgap-lg"> <div class="pb-vgap-lg"> <HamsterLoader /> </div> </div> ), });