refactor: improve 404 page loading experience and styling

- Replace Suspense with useEffect for better control over component mounting.
- Update loading indicators with fixed positioning and enhanced styling for a terminal-like appearance.
- Modify KernelPanic404 component to improve text color handling and ensure proper visibility.
- Introduce checks for 404 page detection based on pathname and data attributes for more accurate rendering.

app/components/ClientProviders.tsx

@@ -16,21 +16,27 @@ export default function ClientProviders({
 }) {
   const [mounted, setMounted] = useState(false);
   const [is404Page, setIs404Page] = useState(false);
+  const pathname = usePathname();
 
   useEffect(() => {
     setMounted(true);
-    // Check if we're on a 404 page by looking for the data attribute
+    // Check if we're on a 404 page by looking for the data attribute or pathname
     const check404 = () => {
       if (typeof window !== "undefined") {
         const has404Component = document.querySelector('[data-404-page]');
-        setIs404Page(!!has404Component);
+        const is404Path = pathname === '/404' || window.location.pathname === '/404' || window.location.pathname.includes('404');
+        setIs404Page(!!has404Component || is404Path);
       }
     };
     // Check immediately and after a short delay
     check404();
     const timeout = setTimeout(check404, 100);
-    return () => clearTimeout(timeout);
-  }, []);
+    const interval = setInterval(check404, 500);
+    return () => {
+      clearTimeout(timeout);
+      clearInterval(interval);
+    };
+  }, [pathname]);
 
   return (
     <AnalyticsProvider>