Fix to prevent possible race condition

Author: samejr

apps/webapp/app/components/ErrorDisplay.tsx

@@ -5,7 +5,7 @@ import { friendlyErrorDisplay } from "~/utils/httpErrors";
 import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
-import { type ReactNode, useEffect } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 
 declare global {
   namespace JSX {
@@ -56,14 +56,21 @@ type DisplayOptionsProps = {
 } & ErrorDisplayOptions;
 
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
+  const [isSplineReady, setIsSplineReady] = useState(false);
+
   useEffect(() => {
-    // Dynamically load the Spline viewer script
-    if (!customElements.get("spline-viewer")) {
-      const script = document.createElement("script");
-      script.type = "module";
-      script.src = "https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js";
-      document.head.appendChild(script);
+    // Already registered from a previous render
+    if (customElements.get("spline-viewer")) {
+      setIsSplineReady(true);
+      return;
     }
+
+    const script = document.createElement("script");
+    script.type = "module";
+    script.src = "https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js";
+    script.onload = () => setIsSplineReady(true);
+    // On error, we simply don't show the decorative viewer - no action needed
+    document.head.appendChild(script);
   }, []);
 
   return (
@@ -80,18 +87,20 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
           {button ? button.title : "Go to homepage"}
         </LinkButton>
       </div>
-      <motion.div
-        className="pointer-events-none absolute inset-0 overflow-hidden"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.5, duration: 2, ease: "easeOut" }}
-      >
-        <spline-viewer
-          loading-anim-type="spinner-small-light"
-          url="https://prod.spline.design/wRly8TZN-e0Twb8W/scene.splinecode"
-          style={{ width: "100%", height: "100%" }}
-        />
-      </motion.div>
+      {isSplineReady && (
+        <motion.div
+          className="pointer-events-none absolute inset-0 overflow-hidden"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5, duration: 2, ease: "easeOut" }}
+        >
+          <spline-viewer
+            loading-anim-type="spinner-small-light"
+            url="https://prod.spline.design/wRly8TZN-e0Twb8W/scene.splinecode"
+            style={{ width: "100%", height: "100%" }}
+          />
+        </motion.div>
+      )}
     </div>
   );
 }