Loading Components Example
Demonstrates two loading indicators: ThreeDotLoading (bouncing dots) and LoadingSpinner (pulsing dots).
Showcase
Both components take no props and render out of the box.
ThreeDotLoading
LoadingSpinner
Typical usage
Show while loading, hide when done. Click the button to simulate a 1.5s request.
Loaded
Loading Components Usage Guide
Overview
The project ships two loading indicators, both with no props and ready out of the box:
| Component | File | Implementation |
|---|---|---|
ThreeDotLoading | ThreeDotLoading.tsx | Pure Tailwind animate-bounce three-dot bounce |
LoadingSpinner | LoadingSpinner.tsx | motion/react three-dot pulse + inline styles |
Both are single-purpose placeholders for the "loading data" state.
ThreeDotLoading — bouncing dots
A pure-CSS (Tailwind) three-dot bounce with an SSR mount guard (returns an empty node on the first frame, then renders after mount to avoid hydration flicker), plus accessibility attributes.
import ThreeDotLoading from "@/common/components/ThreeDotLoading";
{loading ? <ThreeDotLoading /> : <Content />}
| Feature | Description |
|---|---|
| Dependency | None (pure Tailwind) |
| props | None |
| SSR guard | Empty until mounted |
| A11y | role="status" + aria-label="loading" |
LoadingSpinner — pulsing dots
A three-dot scale pulse built on motion/react (Framer Motion); styles are injected via an inline <style>, so there is no external CSS dependency.
import LoadingSpinner from "@/common/components/LoadingSpinner";
<LoadingSpinner />
| Feature | Description |
|---|---|
| Dependency | motion/react |
| props | None |
| Animation | scale 1 → 1.5 → 1, looping |
| Styles | Injected via inline <style> |
Choosing
- Zero deps, small footprint, consistent with the Tailwind system →
ThreeDotLoading - Already using motion, want a smoother pulse →
LoadingSpinner