improve loader and loading

devnuckles · devnuckles · commit 18830c8f7dde · 2026-03-08T15:26:36.000+06:00
diff --git a/src/app/books/[id]/page.tsx b/src/app/books/[id]/page.tsx
@@ -373,12 +373,7 @@ export default function BookDetailPage() {
 
   if (!_hasHydrated || !book) {
     return (
-    <div 
-      className="min-h-screen flex items-center justify-center"
-      style={{ backgroundColor: 'var(--background)' }}
-    >
-      <Loader size="lg" />
-    </div>
+      <Loader size="lg" fullScreen/>
     );
   }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,6 +15,23 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        {/* Theme initialization script - runs before React hydrates */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const theme = localStorage.getItem('app-theme') || 'default';
+                  if (['default', 'dark', 'reading'].includes(theme)) {
+                    document.documentElement.setAttribute('data-theme', theme);
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
       <body className="flex flex-col min-h-screen">
         {/* SVG Filter for hand-drawn/pencil effect */}
         <svg style={{ position: 'absolute', width: 0, height: 0 }} aria-hidden="true">
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
@@ -1,12 +1,5 @@
 import { Loader } from '@/components/ui/loader';
 
 export default function Loading() {
-  return (
-    <div 
-      className="min-h-screen flex items-center justify-center"
-      style={{ backgroundColor: 'var(--background)' }}
-    >
-      <Loader size="lg" />
-    </div>
-  );
+  return <Loader size="lg" fullScreen />;
 }
diff --git a/src/components/ui/loader.tsx b/src/components/ui/loader.tsx
@@ -9,6 +9,7 @@ interface LoaderProps {
   size?: LoaderSize;
   text?: string;
   className?: string;
+  fullScreen?: boolean;
 }
 
 const sizeMap: Record<LoaderSize, number> = {
@@ -17,32 +18,55 @@ const sizeMap: Record<LoaderSize, number> = {
   lg: 72,
 };
 
-export function Loader({ size = 'md', text = 'Loading...', className }: LoaderProps) {
+export function Loader({ 
+  size = 'md', 
+  text = 'Loading...', 
+  className,
+  fullScreen = false 
+}: LoaderProps) {
   const iconSize = sizeMap[size];
 
-  return (
+  const content = (
     <div className={cn('flex flex-col items-center justify-center gap-3', className)}>
       <div
         className="animate-book-flip"
         style={{
           width: iconSize,
           height: iconSize,
+          color: 'var(--foreground)',
         }}
       >
         <BookOpen
           style={{
             width: iconSize,
             height: iconSize,
-            color: 'var(--foreground)',
           }}
         />
       </div>
-      <p
+      <p 
         className="text-sm font-medium animate-pulse"
-        style={{ color: 'var(--muted-foreground)' }}
+        style={{
+          color: 'var(--muted-foreground)',
+        }}
       >
         {text}
       </p>
     </div>
   );
+
+  if (fullScreen) {
+    return (
+      <div 
+        className="fixed inset-0 flex items-center justify-center z-50"
+        style={{
+          backgroundColor: 'var(--background)',
+          color: 'var(--foreground)',
+        }}
+      >
+        {content}
+      </div>
+    );
+  }
+
+  return content;
 }
