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/KernelPanic404Wrapper.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function KernelPanic404Wrapper() {
+  useEffect(() => {
+    // Ensure body and html don't interfere
+    document.body.style.background = "#020202";
+    document.body.style.color = "#33ff00";
+    document.documentElement.style.background = "#020202";
+    document.documentElement.style.color = "#33ff00";
+    
+    return () => {
+      // Cleanup
+      document.body.style.background = "";
+      document.body.style.color = "";
+      document.documentElement.style.background = "";
+      document.documentElement.style.color = "";
+    };
+  }, []);
+
+  return (
+    <iframe
+      src="/404-terminal.html"
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        border: "none",
+        zIndex: 9999,
+        margin: 0,
+        padding: 0,
+        backgroundColor: "#020202",
+      }}
+      data-404-page="true"
+      allowTransparency={false}
+    />
+  );
+}