apex-ui-kit 2.5.0 → 2.6.0

package/ReadMe.md

@@ -240,11 +240,11 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
 | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
 
-## What's new in 2.5
+## What's new in 2.6
 
 - 27 new components, including WebGL and three.js (Galaxy 3D, Warp Tunnel, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
 - AI Model Prompt now exports `DEFAULT_LLM_MODELS` and an index file, so you can import both from the folder.
-- Loading Screens show real progress: `useLoadProgress` loads your images, files or code and drives the bar and the count.
+- Loading Screens follow the real page load by default: drop `<LoadingScreen fullScreen />` into your app and it covers the page while it loads, with a live bar and percentage, then hides itself. Pass `progress` to drive it yourself.
 - Hold to Confirm follows a delete flow with an `UndoNotice` that counts down before the action is final.
 - Sliders and drag components no longer stop midway when the page text gets selected.
 - Stepper and Animated Tabs keep a steady height, Shiny Text loops seamlessly, Cube Gallery is a real 3D cube and Flip Book is a hardcover book you can drag.

package/dist/ApexUI-Kit/templates/LoadingScreen/LoadingScreen.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion, useAnimationControls, useReducedMotion } from "framer-motion";
+import { usePageProgress } from "./usePageProgress.js";
 
 /*
  * Loading Screen: five ways to wait.
@@ -9,50 +10,27 @@ import { AnimatePresence, motion, useAnimationControls, useReducedMotion } from
  *  catch    – a mini game: tap the orb before its ring runs out and build a combo
  *  runner   – a mini game: jump the neon pillars (Space / ↑ / tap) while things load
  *  racer    – a mini game: steer through traffic (← → / tap a side) while things load
- * Pass `progress` (0–100) yourself, or leave it out and it runs on its own.
+ * By default it shows the real page load: the bar and the count follow the
+ * images, scripts, styles and fonts the page is actually loading, and it
+ * hides itself once everything has loaded (autoHide). Pass `progress`
+ * (0 to 100) to drive it yourself instead.
  */
 
-const MESSAGES = ["Warming up the engines", "Fetching your components", "Polishing pixels", "Almost there"];
+const MESSAGES = ["Starting up", "Loading page", "Loading content", "Almost ready"];
 const messageFor = (v) => MESSAGES[Math.min(MESSAGES.length - 1, Math.floor(v / (100 / MESSAGES.length)))];
 
-// Simulated progress that eases toward 100 over `duration` ms, then calls onComplete.
-function useProgress(progress, duration, loop, onComplete) {
-    const [auto, setAuto] = useState(0);
+// Real progress: your own `progress` when given, otherwise the page's real load.
+function useProgress(progress, onComplete) {
+    const controlled = typeof progress === "number";
+    const page = usePageProgress(!controlled);
+    const value = Math.round(Math.max(0, Math.min(100, controlled ? progress : page.progress)));
     const doneRef = useRef(onComplete);
     doneRef.current = onComplete;
-    const controlled = typeof progress === "number";
-
-    useEffect(() => {
-        if (controlled) return undefined;
-        let raf = 0;
-        let start = performance.now();
-        let fired = false;
-        const tick = (now) => {
-            const t = Math.min(1, Math.max(0, (now - start) / duration));
-            // Fast start, slow middle, quick finish — the way real loads feel.
-            const eased = t < 0.85 ? 0.92 * (1 - Math.pow(1 - t / 0.85, 2.2)) : 0.92 + 0.08 * ((t - 0.85) / 0.15);
-            setAuto(Math.round(eased * 100));
-            if (t >= 1) {
-                if (!fired) {
-                    fired = true;
-                    doneRef.current?.();
-                }
-                if (loop) {
-                    start = now + 900;
-                    fired = false;
-                } else return;
-            }
-            raf = requestAnimationFrame(tick);
-        };
-        raf = requestAnimationFrame(tick);
-        return () => cancelAnimationFrame(raf);
-    }, [controlled, duration, loop]);
-
+    const complete = value >= 100 && (controlled || page.done);
     useEffect(() => {
-        if (controlled && progress >= 100) doneRef.current?.();
-    }, [controlled, progress]);
-
-    return Math.round(Math.max(0, Math.min(100, controlled ? progress : auto)));
+        if (complete) doneRef.current?.();
+    }, [complete]);
+    return { value, complete };
 }
 
 function Bar({ value, color, track }) {
@@ -108,8 +86,8 @@ function Orbit({ value, color, moving }) {
     );
 }
 
-function ProgressView({ value, color, track, moving }) {
-    const message = messageFor(value);
+function ProgressView({ value, color, track, moving, statusText }) {
+    const message = statusText ?? `${messageFor(value)}…`;
     return (
         <div className="w-[min(22rem,80vw)]">
             <p className="font-mono text-[clamp(3.5rem,12vw,5.5rem)] font-bold leading-none tabular-nums tracking-tight">
@@ -122,7 +100,7 @@ function ProgressView({ value, color, track, moving }) {
             <div className="mt-3 h-5 overflow-hidden text-sm opacity-70">
                 <AnimatePresence mode="wait" initial={false}>
                     <motion.p key={message} initial={{ y: 14, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -14, opacity: 0 }} transition={{ duration: moving ? 0.25 : 0 }}>
-                        {message}…
+                        {message}
                     </motion.p>
                 </AnimatePresence>
             </div>
@@ -760,30 +738,39 @@ function RacerGame({ value, color, track, dark, statusText }) {
 const LoadingScreen = ({
     variant = "orbit",
     progress,
-    duration = 6000,
-    loop = true,
     accentColor = "#a3e635",
     theme = "dark",
     title = "Loading",
     fullScreen = false,
+    autoHide = true,
     onComplete,
     statusText,
     className = "",
 }) => {
     const moving = !useReducedMotion();
-    const value = useProgress(progress, duration, loop, onComplete);
+    const { value, complete } = useProgress(progress, onComplete);
+    const [gone, setGone] = useState(false);
     const dark = theme !== "light";
     const track = dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";
-    const shared = { value, color: accentColor, track, moving, dark, statusText };
+    // Page-style status ("Loading page…", "Almost ready…"), or your own text.
+    const status = statusText ?? (complete ? "Page ready" : undefined);
+    const shared = { value, color: accentColor, track, moving, dark, statusText: status };
     const game = variant === "catch" || variant === "runner" || variant === "racer";
+    const hiding = autoHide && complete;
 
+    if (gone) return null;
     return (
-        <div
+        <motion.div
             data-loading-screen=""
             role="status"
             aria-live="polite"
+            aria-busy={!complete}
             aria-label={`${title} ${value}%`}
-            className={`flex flex-col items-center justify-center gap-6 p-6 sm:p-8 ${fullScreen ? "fixed inset-0 z-[100]" : "relative h-full w-full"} ${dark ? "bg-neutral-950 text-white" : "bg-white text-neutral-900"} ${className}`}
+            initial={false}
+            animate={{ opacity: hiding ? 0 : 1 }}
+            transition={{ duration: 0.45, delay: hiding ? 0.35 : 0 }}
+            onAnimationComplete={() => hiding && setGone(true)}
+            className={`flex flex-col items-center justify-center gap-6 p-6 sm:p-8 ${fullScreen ? "fixed inset-0 z-[100]" : "relative h-full w-full"} ${hiding ? "pointer-events-none" : ""} ${dark ? "bg-neutral-950 text-white" : "bg-white text-neutral-900"} ${className}`}
             style={dark ? { backgroundImage: `radial-gradient(60% 50% at 50% 40%, ${accentColor}14, transparent 70%)` } : undefined}
         >
             {game && (
@@ -798,8 +785,13 @@ const LoadingScreen = ({
             {variant === "catch" && <CatchGame {...shared} />}
             {variant === "runner" && <RunnerGame {...shared} />}
             {variant === "racer" && <RacerGame {...shared} />}
-            {!game && variant !== "progress" && <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] opacity-50">{title}</p>}
-        </div>
+            {!game && variant !== "progress" && (
+                <p className="text-center">
+                    <span className="block text-[0.7rem] font-semibold uppercase tracking-[0.3em] opacity-50">{title}</span>
+                    <span className="mt-1.5 block text-[0.75rem] opacity-60">{status ?? `${messageFor(value)}…`}</span>
+                </p>
+            )}
+        </motion.div>
     );
 };
 

package/dist/ApexUI-Kit/templates/LoadingScreen/usePageProgress.js

@@ -0,0 +1,135 @@
+import { useEffect, useState } from "react";
+
+/*
+ * Real page-load progress, used by <LoadingScreen /> when you don't pass
+ * your own `progress`. It counts what the page is actually loading:
+ *
+ *  - every <img> still loading (including ones added later),
+ *  - scripts, stylesheets, fonts and fetches as the browser finishes them,
+ *  - web fonts (document.fonts.ready) and the window "load" event.
+ *
+ * `progress` is finished / total (0 to 100) and only reaches 100 once the
+ * page has fully loaded and nothing new has started for a moment, so the
+ * bar and the count always match what really happened.
+ */
+
+const SETTLE_MS = 350;
+
+export function usePageProgress(enabled = true) {
+    const [state, setState] = useState({ loaded: 0, total: 0, done: false });
+
+    useEffect(() => {
+        if (!enabled || typeof window === "undefined") return undefined;
+        let loaded = 0;
+        let total = 0;
+        let waitingForPage = document.readyState !== "complete";
+        let settle = 0;
+        let finished = false;
+        const seen = new WeakSet();
+        const cleanups = [];
+
+        const update = () => {
+            if (finished) return;
+            const idle = !waitingForPage && loaded >= total;
+            setState({ loaded, total, done: false });
+            clearTimeout(settle);
+            if (idle) {
+                // Wait a moment: a page often starts a few more requests right after load.
+                settle = setTimeout(() => {
+                    if (!waitingForPage && loaded >= total) {
+                        finished = true;
+                        setState({ loaded, total: Math.max(total, loaded), done: true });
+                    }
+                }, SETTLE_MS);
+            }
+        };
+        const add = (n = 1) => {
+            total += n;
+            update();
+        };
+        const finish = () => {
+            loaded += 1;
+            update();
+        };
+
+        // Only what is still loading (or starts) after the loader appears is counted,
+        // so the bar runs from 0 to 100 for this load.
+        // Images: pending ones count until they load or fail.
+        const trackImage = (img) => {
+            if (seen.has(img)) return;
+            seen.add(img);
+            if (img.complete) return;
+            add();
+            const end = () => {
+                img.removeEventListener("load", end);
+                img.removeEventListener("error", end);
+                finish();
+            };
+            img.addEventListener("load", end);
+            img.addEventListener("error", end);
+            cleanups.push(() => {
+                img.removeEventListener("load", end);
+                img.removeEventListener("error", end);
+            });
+        };
+        Array.from(document.images).forEach(trackImage);
+        const mo = new MutationObserver((list) => {
+            for (const m of list) {
+                m.addedNodes.forEach((n) => {
+                    if (n.nodeType !== 1) return;
+                    if (n.tagName === "IMG") trackImage(n);
+                    else n.querySelectorAll?.("img").forEach(trackImage);
+                });
+            }
+        });
+        mo.observe(document.documentElement, { childList: true, subtree: true });
+
+        // Other files (scripts, CSS, fonts, fetch) are counted as the browser finishes them.
+        let po;
+        if (typeof PerformanceObserver !== "undefined") {
+            po = new PerformanceObserver((list) => {
+                const fresh = list.getEntries().filter((e) => e.initiatorType !== "img");
+                if (!fresh.length) return;
+                total += fresh.length;
+                loaded += fresh.length;
+                update();
+            });
+            try {
+                po.observe({ type: "resource", buffered: false });
+            } catch {
+                po = undefined;
+            }
+        }
+
+        // The page itself.
+        if (waitingForPage) {
+            total += 1;
+            const onLoad = () => {
+                waitingForPage = false;
+                finish();
+            };
+            window.addEventListener("load", onLoad, { once: true });
+            cleanups.push(() => window.removeEventListener("load", onLoad));
+        }
+        // Web fonts.
+        if (document.fonts && document.fonts.status !== "loaded") {
+            total += 1;
+            document.fonts.ready.then(finish, finish);
+        }
+        update();
+
+        return () => {
+            finished = true;
+            clearTimeout(settle);
+            mo.disconnect();
+            po?.disconnect();
+            cleanups.forEach((fn) => fn());
+        };
+    }, [enabled]);
+
+    const total = Math.max(1, state.total);
+    const progress = state.done ? 100 : Math.min(99, Math.round((state.loaded / total) * 100));
+    return { progress, loaded: state.loaded, total: state.total, done: state.done };
+}
+
+export default usePageProgress;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "MIT",
   "description": "96 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",