fix: loader

index.html

@@ -97,7 +97,8 @@
     /* --- logo con destello pulsante ------------------------------------ */
     #splash img {
       z-index: 10;
-      animation: pulseShadow 8s ease-in-out infinite;
+      border: 1px solid rgb(255 255 255 / 30%);
+      border-radius: 50%;
     }
 
     /* --- “neones” de colores ------------------------------------------- */
@@ -153,14 +154,13 @@
 
 <script type="module" src="/src/index.tsx"></script>
 <script>
-  new MutationObserver((m,obs)=>{
-    const root=document.getElementById('root');
-    if(root && root.childElementCount){
-      document.getElementById('splash')?.remove();
-      root.style.opacity='1';
-      obs.disconnect();
-    }
-  }).observe(document.getElementById('root'),{childList:true});
+  function showApp() {
+    const root = document.getElementById('root');
+    document.getElementById('splash')?.remove();
+    root.style.opacity = '1';
+    window.removeEventListener('app:ready', showApp);
+  }
+  window.addEventListener('app:ready', showApp);
 </script>
 </body>
 </html>

src/components/app-ready.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function AppReady() {
+  useEffect(() => {
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new Event('app:ready'));
+      })
+    );
+  }, []);
+  return null;
+}

src/routes/sections/dashboard.tsx

@@ -5,6 +5,7 @@ import DashboardLayout from '@src/layouts/dashboard';
 // components
 import { LoadingScreen, SplashScreen } from '@src/components/loading-screen';
 import CompactLayout from '@src/layouts/compact';
+import AppReady from '@src/components/app-ready.tsx';
 
 
 // ----------------------------------------------------------------------
@@ -42,6 +43,7 @@ export const dashboardRoutes = [
     element: (
       <DashboardLayout>
         <Suspense fallback={<LoadingScreen />}>
+          <AppReady />
           <Outlet />
         </Suspense>
       </DashboardLayout>