HamsterLoader

Signature hamster-wheel loading spinner.

Page Chrome

Default

In search-loading context

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */
// 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 className="max-w-[820px] mx-auto pt-vgap-lg">
      <div className="pb-vgap-lg">
        <HamsterLoader />
      </div>
    </div>
  ),
});

Live CSS

Injected into the previews above. HamsterLoader

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */