Implement global customizable Loader component

### **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.

Start by inspecting the existing components in /components/common and searching the codebase for current loading states in authentication, dashboard/profile data, form submissions, and other data-fetching pages. Done means a reusable, accessible, responsive Loader supports the listed props and replaces manual "Loading..." strings across those areas.

Written by the indexing model from the issue text.