refactor(loading, auth, status): enhance UI components for improved aesthetics and functionality

- Redesigned Loading component to feature a full-screen loader with animated elements for a modern look.
- Updated SigninWithPassword component to include error handling and improved password visibility toggle.
- Refactored Status component to utilize a tone-based styling system for better visual feedback based on status types.

src/components/loading.tsx

@@ -3,20 +3,104 @@ import { cn } from "@/lib/utils";
 interface IProps {
   className?: string | null;
 }
+
 /**
- * Grows with a flex `main` parent so the spinner sits in the middle of the content area.
- * Guards: `min-h-svh flex-none`. Compact UI: `flex-none min-h-*`.
+ * Full-screen route-style loader (orbs, rings, shimmer). Pass `className` to adapt
+ * the shell—for example `min-h-48 flex-none` inside compact panels.
  */
 const Loading = ({ className }: IProps) => {
   return (
-    <div
-      className={cn(
-        "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center",
-        className,
-      )}
-    >
-      <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary" />
-    </div>
+    <>
+      <style>{`
+        @keyframes app-route-loading-shimmer {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(400%); }
+        }
+      `}</style>
+      <div
+        className={cn(
+          "relative flex min-h-svh w-full min-w-0 flex-1 items-center justify-center overflow-hidden bg-gray dark:bg-dark",
+          className,
+        )}
+      >
+        {/* Soft gradient wash */}
+        <div
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(87,80,241,0.22),transparent)] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(87,80,241,0.35),transparent)]"
+          aria-hidden
+        />
+
+        {/* Floating orbs */}
+        <div
+          className="pointer-events-none absolute -left-32 top-1/4 h-72 w-72 animate-pulse rounded-full bg-primary/20 blur-3xl dark:bg-primary/25"
+          aria-hidden
+        />
+        <div
+          className="pointer-events-none absolute -right-24 bottom-1/4 h-64 w-64 animate-pulse rounded-full bg-blue/25 blur-3xl dark:bg-blue/20"
+          style={{ animationDelay: "1s" }}
+          aria-hidden
+        />
+        <div
+          className="pointer-events-none absolute left-1/2 top-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-[100px] dark:bg-primary/15"
+          aria-hidden
+        />
+
+        {/* Subtle grid */}
+        <div
+          className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,rgba(148,163,184,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.06)_1px,transparent_1px)] bg-[size:48px_48px] dark:bg-[linear-gradient(to_right,rgba(55,65,81,0.15)_1px,transparent_1px),linear-gradient(to_bottom,rgba(55,65,81,0.15)_1px,transparent_1px)]"
+          aria-hidden
+        />
+
+        <div className="relative z-10 flex flex-col items-center gap-8 px-6">
+          <div className="relative flex h-28 w-28 items-center justify-center">
+            {/* Outer glow */}
+            <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl dark:bg-primary/30" />
+
+            {/* Concentric rings */}
+            <div className="absolute inset-0 animate-spin rounded-full border-2 border-transparent border-r-primary/40 border-t-primary/90 shadow-[0_0_20px_rgba(87,80,241,0.35)]" />
+            <div
+              className="absolute inset-2 animate-[spin_2.5s_linear_infinite_reverse] rounded-full border-2 border-transparent border-b-blue/70 border-l-blue/30"
+              aria-hidden
+            />
+            <div className="absolute inset-5 rounded-full border border-stroke/80 dark:border-stroke-dark/60" />
+
+            {/* Core */}
+            <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-blue shadow-lg ring-4 ring-white/60 dark:ring-dark-2/80">
+              <span className="text-lg font-bold tracking-tight text-white drop-shadow-sm">
+                OL
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-col items-center gap-3 text-center">
+            <div className="flex items-center gap-1.5">
+              <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+              <span
+                className="h-2 w-2 animate-pulse rounded-full bg-primary/70"
+                style={{ animationDelay: "0.2s" }}
+              />
+              <span
+                className="h-2 w-2 animate-pulse rounded-full bg-primary/40"
+                style={{ animationDelay: "0.4s" }}
+              />
+            </div>
+            <p className="bg-gradient-to-r from-dark via-primary to-blue bg-clip-text text-body-sm font-medium text-transparent dark:from-gray-7 dark:via-primary dark:to-blue-light">
+              Preparing your workspace…
+            </p>
+          </div>
+
+          {/* Shimmer bar */}
+          <div className="h-1 w-48 overflow-hidden rounded-full bg-stroke dark:bg-stroke-dark">
+            <div
+              className="h-full w-1/3 rounded-full bg-gradient-to-r from-transparent via-primary to-transparent"
+              style={{
+                animation:
+                  "app-route-loading-shimmer 1.5s ease-in-out infinite",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </>
   );
 };