Description :
Currently, our application handles loading states inconsistently (or not at all) across different views. We need a modern, high-quality Loader component that can be easily dropped into any page or component to improve perceived performance.
Technical Requirements :
Modern UI: Use a sleek spinner, CSS-only animation, or an SVG-based design that fits our branding.
Customization: The component must accept props for:
text: Optional message (e.g., "Fetching data...", "Almost there!").
size: (sm, md, lg) to fit different containers.
variant: Support for primary/secondary colors or a "light" version for dark backgrounds.
fullPage: A boolean to toggle between a localized spinner and a centered, full-screen overlay.
Implementation Tasks :
Component Creation: Build the Loader component in the /components/common directory.
Styling: Add smooth fade-in animations so the loader doesn't "flash" on fast connections.
Accessibility: Ensure the component uses aria-busy="true" and role="status" for screen readers.
Global Integration: Identify and replace existing loading states in:
Authentication/Sign-in redirect.
Dashboard/Profile data loading.
Form submission buttons.
Data fetching at various pages
Acceptance Criteria :
The loader is vertically and horizontally centered within its parent container.
Custom text is displayed clearly below the spinner when provided.
The component is responsive and doesn't break the layout of existing sections.
No manual "Loading..." strings remain in the codebase.
Description :
Currently, our application handles loading states inconsistently (or not at all) across different views. We need a modern, high-quality Loader component that can be easily dropped into any page or component to improve perceived performance.
Technical Requirements :
Modern UI: Use a sleek spinner, CSS-only animation, or an SVG-based design that fits our branding.
Customization: The component must accept props for:
text: Optional message (e.g., "Fetching data...", "Almost there!").
size: (sm, md, lg) to fit different containers.
variant: Support for primary/secondary colors or a "light" version for dark backgrounds.
fullPage: A boolean to toggle between a localized spinner and a centered, full-screen overlay.
Implementation Tasks :
Component Creation: Build the Loader component in the /components/common directory.
Styling: Add smooth fade-in animations so the loader doesn't "flash" on fast connections.
Accessibility: Ensure the component uses aria-busy="true" and role="status" for screen readers.
Global Integration: Identify and replace existing loading states in:
Authentication/Sign-in redirect.
Dashboard/Profile data loading.
Form submission buttons.
Data fetching at various pages
Acceptance Criteria :
The loader is vertically and horizontally centered within its parent container.
Custom text is displayed clearly below the spinner when provided.
The component is responsive and doesn't break the layout of existing sections.
No manual "Loading..." strings remain in the codebase.