Use spline-viewer web component and load it dynamically

Author: samejr

apps/webapp/app/components/ErrorDisplay.tsx

@@ -5,8 +5,21 @@ import { friendlyErrorDisplay } from "~/utils/httpErrors";
 import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
-import Spline from "@splinetool/react-spline";
-import { type ReactNode } from "react";
+import { type ReactNode, useEffect } from "react";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "spline-viewer": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & {
+          url?: string;
+          "loading-anim-type"?: string;
+        },
+        HTMLElement
+      >;
+    }
+  }
+}
 
 type ErrorDisplayOptions = {
   button?: {
@@ -43,6 +56,16 @@ type DisplayOptionsProps = {
 } & ErrorDisplayOptions;
 
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
+  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);
+    }
+  }, []);
+
   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">
@@ -63,7 +86,11 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
         animate={{ opacity: 1 }}
         transition={{ delay: 0.5, duration: 2, ease: "easeOut" }}
       >
-        <Spline scene="https://prod.spline.design/wRly8TZN-e0Twb8W/scene.splinecode" />
+        <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>
   );