From 54e2d518c154521dbd5c9db0fd7b7c02ffdb3f14 Mon Sep 17 00:00:00 2001 From: DariusIII Date: Wed, 4 Mar 2026 13:29:44 +0100 Subject: [PATCH] Optimize template --- resources/js/alpine/index.js | 2 - resources/js/alpine/lazy-loader.js | 20 +++++++++- resources/js/app.js | 37 ------------------- resources/views/layouts/admin.blade.php | 1 + resources/views/layouts/guest.blade.php | 1 + resources/views/layouts/main.blade.php | 1 + resources/views/partials/theme-init.blade.php | 23 +++++++----- 7 files changed, 35 insertions(+), 50 deletions(-) diff --git a/resources/js/alpine/index.js b/resources/js/alpine/index.js index 05385508e..c9b1f0620 100644 --- a/resources/js/alpine/index.js +++ b/resources/js/alpine/index.js @@ -21,9 +21,7 @@ import './components/theme-toggle.js'; import './components/back-to-top.js'; import './components/dropdown.js'; import './components/sidebar-toggle.js'; -import './components/admin-submenu.js'; import './components/mobile-nav.js'; -import './components/password-toggle.js'; import './components/confirm-modal.js'; import './components/confirm-link.js'; import './components/toast-notification.js'; diff --git a/resources/js/alpine/lazy-loader.js b/resources/js/alpine/lazy-loader.js index c73cc836c..67351633a 100644 --- a/resources/js/alpine/lazy-loader.js +++ b/resources/js/alpine/lazy-loader.js @@ -14,6 +14,10 @@ import Alpine from '@alpinejs/csp'; * Each module registers itself via Alpine.data() as a side effect. */ const lazyComponentMap = { + // --- Components only needed on specific pages --- + 'adminSubmenu': () => import('./components/admin-submenu.js'), + 'passwordToggle': () => import('./components/password-toggle.js'), + // --- Modal components (only on release pages) --- 'nfoModal': () => import('./components/nfo-modal.js'), 'filelistModal': () => import('./components/filelist-modal.js'), @@ -83,15 +87,27 @@ export function loadAndStart() { if (imports.size === 0) { Alpine.start(); + enableTransitions(); return; } // Load all needed modules in parallel, then start Alpine Promise.all([...imports].map(fn => fn())) - .then(() => Alpine.start()) + .then(() => { + Alpine.start(); + enableTransitions(); + }) .catch(err => { console.error('[lazy-loader] Failed to load component:', err); - // Start Alpine anyway so the page is usable Alpine.start(); + enableTransitions(); }); } + +function enableTransitions() { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.documentElement.removeAttribute('data-loading'); + }); + }); +} diff --git a/resources/js/app.js b/resources/js/app.js index 69977ce57..02b24e504 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,39 +1,2 @@ import './bootstrap'; - -// CSP-safe styles are loaded via resources/css/app.css (no duplicate import here) - -// Import Alpine.js CSP-safe components (replaces old csp-safe.js modules) import './alpine/index.js'; - -// Theme initialization - optimized to prevent flash of unstyled content -(function() { - 'use strict'; - const applyTheme = function() { - const metaTheme = document.querySelector('meta[name="theme-preference"]'); - const themePreference = metaTheme?.content || 'light'; - - if (themePreference === 'system') { - const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); - if (mediaQuery.matches) { - document.documentElement.classList.add('dark'); - } else { - document.documentElement.classList.remove('dark'); - } - } else if (themePreference === 'dark') { - document.documentElement.classList.add('dark'); - } else { - document.documentElement.classList.remove('dark'); - } - }; - - // Apply theme immediately if DOM is ready, otherwise wait - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', applyTheme); - } else { - applyTheme(); - } -})(); - -// FontAwesome icons loaded via CSS webfonts in app.css -// Do NOT import the JS bundle (all.min.js) — it adds ~1.4MB to the build -// and duplicates what the CSS webfont approach already provides. diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php index 44104bc89..c18fc1fa3 100644 --- a/resources/views/layouts/admin.blade.php +++ b/resources/views/layouts/admin.blade.php @@ -3,6 +3,7 @@ + {{-- Apply dark mode BEFORE any CSS loads to prevent white flash --}} diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php index 6385c867c..224d66dd2 100644 --- a/resources/views/layouts/guest.blade.php +++ b/resources/views/layouts/guest.blade.php @@ -3,6 +3,7 @@ + diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php index f834e0b56..0e38f320a 100644 --- a/resources/views/layouts/main.blade.php +++ b/resources/views/layouts/main.blade.php @@ -3,6 +3,7 @@ + diff --git a/resources/views/partials/theme-init.blade.php b/resources/views/partials/theme-init.blade.php index 6fac35326..118a7953f 100644 --- a/resources/views/partials/theme-init.blade.php +++ b/resources/views/partials/theme-init.blade.php @@ -1,13 +1,14 @@ {{-- Dark mode and color scheme initialization - MUST be included at the very top of , BEFORE any CSS/Vite tags, to prevent white flash on page load. - 1. The blocking script applies the 'dark' class and data-color-scheme to synchronously. - 2. The style tag that follows uses those attributes to set html AND body background-color - for every scheme/dark combo so the first paint is never white. + 1. The blocking script applies the 'dark' class, data-color-scheme, and data-loading to synchronously. + 2. The style tag covers background, text color, color-scheme, x-cloak hiding, and transition + suppression so the first paint matches the user's theme with zero flash. --}}