diff --git a/README.md b/README.md index 1a8869f..e2c943a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ -# Nexory.org +# nexory.dev Website for this organisation, informations and more \ No newline at end of file diff --git a/public/dashboard/home.css b/public/dashboard/home.css index 8879138..ca37243 100644 --- a/public/dashboard/home.css +++ b/public/dashboard/home.css @@ -92,11 +92,7 @@ body { width: 0%; background: linear-gradient(90deg, var(--color-grad-2), var(--color-grad-3)); border-radius: 99px; - animation: load-bar 1.2s ease forwards; -} - -@keyframes load-bar { - to { width: 100%; } + transition: width 0.35s ease; } /* -- Hero Section -- */ diff --git a/public/dashboard/home.js b/public/dashboard/home.js index 8feb888..24972f5 100644 --- a/public/dashboard/home.js +++ b/public/dashboard/home.js @@ -1,36 +1,73 @@ /* -- React Preloader -- */ - -const { useEffect, useRef } = React; +const { useEffect, useRef, useState } = React; function Preloader() { const ref = useRef(null); + const progressRef = useRef(0); + const [progress, setProgress] = useState(0); useEffect(() => { - function showPage() { - ref.current.classList.add('hidden'); + function advance(value) { + if (value > progressRef.current) { + progressRef.current = value; + setProgress(value); + } + } - setTimeout(() => { - document.getElementById('page').classList.remove('page-hidden'); - startAnimations(); - }, 500); + advance(5); + + const resources = document.querySelectorAll( + 'link[rel="stylesheet"], script[src], img[src]' + ); + const expectedCount = resources.length; + let loadedCount = 0; + + let observer; + try { + observer = new PerformanceObserver((list) => { + loadedCount += list.getEntries().length; + if (expectedCount > 0) { + const pct = Math.min(85, Math.round((loadedCount / expectedCount) * 85)); + advance(pct); + } + }); + observer.observe({ type: 'resource', buffered: true }); + } catch (_) {} + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => advance(25), { once: true }); + } else { + advance(25); } - function trigger() { - setTimeout(showPage, 1300); + function finishLoading() { + if (observer) observer.disconnect(); + advance(100); + setTimeout(() => { + if (ref.current) ref.current.classList.add('hidden'); + setTimeout(() => { + document.getElementById('page').classList.remove('page-hidden'); + startAnimations(); + }, 500); + }, 450); } if (document.readyState === 'complete') { - trigger(); + setTimeout(finishLoading, 200); } else { - window.addEventListener('load', trigger, { once: true }); + window.addEventListener('load', () => setTimeout(finishLoading, 200), { once: true }); } + + return () => { + if (observer) observer.disconnect(); + }; }, []); return (
Open source projects · Python, JavaScript, PHP and more