Move the rotating spline logo into its own component

Author: samejr

apps/webapp/app/components/ErrorDisplay.tsx

@@ -1,25 +1,11 @@
 import { HomeIcon } from "@heroicons/react/20/solid";
 import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
-import { motion } from "framer-motion";
 import { friendlyErrorDisplay } from "~/utils/httpErrors";
 import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
-import { type ReactNode, useEffect, useState } from "react";
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "spline-viewer": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement> & {
-          url?: string;
-          "loading-anim-type"?: string;
-        },
-        HTMLElement
-      >;
-    }
-  }
-}
+import { TriggerRotatingLogo } from "./TriggerRotatingLogo";
+import { type ReactNode } from "react";
 
 type ErrorDisplayOptions = {
   button?: {
@@ -56,23 +42,6 @@ type DisplayOptionsProps = {
 } & ErrorDisplayOptions;
 
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
-  const [isSplineReady, setIsSplineReady] = useState(false);
-
-  useEffect(() => {
-    // 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 (
     <div className="relative flex min-h-screen flex-col items-center justify-center bg-[#16181C]">
       <div className="z-10 mt-[30vh] flex flex-col items-center gap-8">
@@ -87,20 +56,7 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
           {button ? button.title : "Go to homepage"}
         </LinkButton>
       </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>
-      )}
+      <TriggerRotatingLogo />
     </div>
   );
 }

apps/webapp/app/components/TriggerRotatingLogo.tsx

@@ -0,0 +1,54 @@
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "spline-viewer": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & {
+          url?: string;
+          "loading-anim-type"?: string;
+        },
+        HTMLElement
+      >;
+    }
+  }
+}
+
+export function TriggerRotatingLogo() {
+  const [isSplineReady, setIsSplineReady] = useState(false);
+
+  useEffect(() => {
+    // 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);
+  }, []);
+
+  if (!isSplineReady) {
+    return null;
+  }
+
+  return (
+    <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>
+  );
+}