Refine loaders and hide scrollbars

Author: TripleU613

src/components/PageLoader.jsx

@@ -5,28 +5,30 @@ export default function PageLoader({ show, label = 'Loading' }) {
     <AnimatePresence>
       {show && (
         <motion.div
-          className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-md"
+          className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/90"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
+          transition={{ duration: 0.25 }}
         >
           <motion.div
-            className="relative w-full max-w-sm rounded-3xl border border-white/10 bg-slate-950/80 p-8 text-center text-white shadow-2xl"
-            initial={{ scale: 0.92 }}
-            animate={{ scale: 1 }}
-            exit={{ scale: 0.9, opacity: 0 }}
-            transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+            className="flex w-full max-w-xs flex-col items-center gap-4 rounded-3xl border border-white/10 bg-slate-950/70 px-8 py-10 text-center text-white shadow-2xl"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.92, opacity: 0 }}
+            transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
           >
-            <p className="text-sm uppercase tracking-[0.4em] text-sky-300">{label}</p>
-            <h2 className="mt-4 text-xl font-semibold">Preparing content…</h2>
-            <p className="mt-2 text-xs text-slate-300">Hang tight for a second.</p>
-            <div className="mt-6 h-2 w-full overflow-hidden rounded-full bg-white/10">
+            <div className="flex items-center gap-2 text-xs uppercase tracking-[0.5em] text-slate-300">
+              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-sky-300" />
+              {label}
+            </div>
+            <p className="text-sm text-slate-300">Preparing content…</p>
+            <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-white/10">
               <motion.span
-                className="block h-full rounded-full bg-gradient-to-r from-sky-400 via-indigo-400 to-purple-400"
+                className="absolute inset-y-0 w-1/3 rounded-full bg-white/60"
                 initial={{ x: '-100%' }}
-                animate={{ x: ['-100%', '0%', '0%', '100%'] }}
-                transition={{ duration: 1.8, repeat: Infinity, ease: 'easeInOut' }}
+                animate={{ x: ['-100%', '130%'] }}
+                transition={{ duration: 1.4, repeat: Infinity, ease: 'easeInOut' }}
               />
             </div>
           </motion.div>

src/pages/Apps.jsx

@@ -38,14 +38,16 @@ export default function Apps() {
   const [verificationMessage, setVerificationMessage] = useState('');
   const [showSubmissionForm, setShowSubmissionForm] = useState(false);
   const [catalogReady, setCatalogReady] = useState(false);
+  const [catalogLoading, setCatalogLoading] = useState(true);
 
   useEffect(() => {
     setCatalogReady(false);
+    setCatalogLoading(true);
     const appsRef = collection(firestore, 'apps');
     const approvedQuery = query(appsRef, where('status', '==', 'approved'), orderBy('createdAt', 'desc'));
     const unsubApproved = onSnapshot(approvedQuery, (snapshot) => {
       setApprovedApps(snapshot.docs.map((docSnap) => ({ id: docSnap.id, ...docSnap.data() })));
-      setCatalogReady(true);
+      setCatalogLoading(false);
     });
 
     let unsubPending = () => {};
@@ -356,6 +358,12 @@ export default function Apps() {
     );
   };
 
+  useEffect(() => {
+    if (catalogLoading) return;
+    const timeout = setTimeout(() => setCatalogReady(true), 350);
+    return () => clearTimeout(timeout);
+  }, [catalogLoading]);
+
   return (
     <>
       <PageLoader show={!catalogReady} label="Loading catalog" />

src/styles/global.css

@@ -45,6 +45,7 @@ body {
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background-color: #020617;
   min-height: 100vh;
+  overflow-y: auto;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge */
 }
@@ -53,3 +54,12 @@ body::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
+
+html {
+  overflow-y: scroll;
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+  display: none;
+}