refactor: Enhance Preloader component with dynamic loading messages a…

…nd styling
pranshu05 · Nov 12, 2024 · 297123e · 297123e
1 parent df5b928
commit 297123e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 21 deletions.
diff --git a/src/components/(layout)/Preloader.tsx b/src/components/(layout)/Preloader.tsx
@@ -1,21 +1,41 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
+
+const loadingMessages = [
+    "Starting app...",
+    "Loading configuration files...",
+    "Fetching resources...",
+    "Connecting to database...",
+    "Setting up environment...",
+    "Loading assets...",
+    "Finalizing setup...",
+    "Almost there..."
+];
 
 const Preloader: React.FC = () => {
     const [progress, setProgress] = useState(0);
+    const [message, setMessage] = useState(loadingMessages[0]);
 
     useEffect(() => {
         const interval = setInterval(() => {
-            setProgress((prev) => (prev < 100 ? prev + 10 : 100));
-        }, 100);
+            setProgress((prev) => {
+                const newProgress = prev + 10;
+                if (newProgress <= 100) {
+                    const messageIndex = Math.floor(newProgress / (100 / loadingMessages.length));
+                    setMessage(loadingMessages[messageIndex] || "Loading...");
+                }
+                return newProgress >= 100 ? 100 : newProgress;
+            });
+        }, 500);
 
         return () => clearInterval(interval);
     }, []);
 
     return (
-        <div className="flex items-center justify-center h-screen bg-neutral-950">
-            <div className="w-4/5 md:w-3/4 lg:w-1/2 h-2 bg-zinc-700 overflow-hidden">
-                <div className="h-full bg-zinc-300" style={{ width: `${progress}%` }}></div>
-            </div>
+        <div className="flex flex-col items-center justify-center h-screen bg-neutral-950 text-zinc-300">
+            <p className="mb-4 text-lg">Loading...</p>
+            <div className="w-3/4 h-2 bg-zinc-700 rounded-full overflow-hidden mb-2">
+                <div className="h-full bg-zinc-300 rounded-full transition-all duration-300 ease-out" style={{ width: `${progress}%` }}></div></div>
+            <p className="mt-2 text-sm text-zinc-400">{message}</p>
         </div>
     );
 };

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -15,26 +15,28 @@ export default function App({ Component, pageProps }: AppProps) {
     const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
-        const handleLoad = () => setIsLoading(false);
+        const handleLoad = () => {
+            setTimeout(() => {
+                setIsLoading(false);
+            }, 1500); // 1.5-second delay for testing
+        };
 
         (document.readyState === 'complete') ? handleLoad() : window.addEventListener('load', handleLoad);
 
         return () => window.removeEventListener('load', handleLoad);
     }, []);
 
+    if (isLoading) {
+        return <Preloader />;
+    }
+
     return (
-        <>
-            {isLoading ? (
-                <Preloader />
-            ) : (
-                <div className={`min-h-dvh w-[dvw - 10px] p-0 m-0 bg-neutral-950 text-zinc-300 flex flex-col ${font.className}`}>
-                    <NavBar />
-                    <div className="flex-1">
-                        <Component {...pageProps} />
-                    </div>
-                    <Footer />
-                </div>
-            )}
-        </>
+        <div className={`min-h-dvh w-[dvw - 10px] p-0 m-0 bg-neutral-950 text-zinc-300 flex flex-col ${font.className}`}>
+            <NavBar />
+            <div className="flex-1">
+                <Component {...pageProps} />
+            </div>
+            <Footer />
+        </div>
     );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -6,6 +6,35 @@ class MyDocument extends Document {
             <Html>
                 <Head>
                     <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml" />
+
+                    <style>{`
+                        #preloader {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
+                            height: 100vh;
+                            background-color: rgb(10 10 10);
+                            color: rgb(212 212 216);
+                        }
+                        #preloader .progress-bar {
+                            width: 75%;
+                            height: 8px;
+                            background-color: rgb(24 24 27);
+                            overflow: hidden;
+                            margin-top: 1rem;
+                        }
+                        #preloader .progress {
+                            height: 100%;
+                            background-color: rgb(82 82 91);
+                            transition: width 0.3s ease-out;
+                        }
+                        #preloader .loading-message {
+                            margin-top: 0.5rem;
+                            font-size: 0.875rem;
+                            color: #a1a1aa;
+                        }
+                    `}</style>
                 </Head>
                 <body>
                     <Main />