|
1 | 1 | <script lang="ts"> |
2 | | - import { onMount, onDestroy } from "svelte"; |
| 2 | + import { onMount } from "svelte"; |
| 3 | + import { base } from "$app/paths"; |
3 | 4 |
|
4 | | - let isLoading = $state(true); |
5 | | - let isVisible = $state(false); |
6 | | - let observer: MutationObserver | null = null; |
7 | | - let checkInterval: number | null = null; |
8 | | - let checkCount = 0; |
9 | | - const MAX_CHECKS = 50; // 5 seconds at 100ms intervals |
| 5 | + let canvas: HTMLCanvasElement | null = null; |
| 6 | + type SplineApp = import("@splinetool/runtime").Application; |
10 | 7 |
|
11 | | - // Function to hide the Spline logo |
12 | | - const hideSplineLogo = () => { |
13 | | - const viewer = document.querySelector("#fact-token"); |
14 | | - if (!viewer?.shadowRoot) return; |
| 8 | + let app: SplineApp | null = null; |
15 | 9 |
|
16 | | - // Try to find and remove the logo |
17 | | - const logo = viewer.shadowRoot.querySelector("a#logo"); |
18 | | - if (logo) { |
19 | | - // Apply all styles at once to minimize reflows |
20 | | - (logo as HTMLElement).style.cssText = |
21 | | - "display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;"; |
22 | | - logo.remove(); |
23 | | - } |
| 10 | + onMount(() => { |
| 11 | + let isDisposed = false; |
24 | 12 |
|
25 | | - // Check if canvas exists to determine if model is loaded |
26 | | - const canvas = viewer.shadowRoot.querySelector("canvas"); |
27 | | - if (canvas) { |
28 | | - isLoading = false; |
29 | | - // Once we have the canvas, we can stop checking |
30 | | - if (checkInterval) { |
31 | | - clearInterval(checkInterval); |
32 | | - checkInterval = null; |
33 | | - } |
34 | | - if (observer) { |
35 | | - observer.disconnect(); |
36 | | - observer = null; |
37 | | - } |
38 | | - } |
39 | | - }; |
40 | | -
|
41 | | - // Function to ensure we have access to the shadow root |
42 | | - const ensureShadowRootAccess = () => { |
43 | | - const viewer = document.querySelector("#fact-token"); |
44 | | - if (!viewer?.shadowRoot) return false; |
45 | | -
|
46 | | - // Set up the observer if we haven't already |
47 | | - if (!observer) { |
48 | | - observer = new MutationObserver((mutations) => { |
49 | | - // Only process mutations if we're still loading |
50 | | - if (isLoading) { |
51 | | - hideSplineLogo(); |
52 | | - } |
53 | | - }); |
| 13 | + (async () => { |
| 14 | + if (!canvas) return; |
| 15 | + const { Application } = await import("@splinetool/runtime"); |
| 16 | + if (isDisposed) return; |
| 17 | + app = new Application(canvas); |
| 18 | + await app.load(`${base}/token.splinecode`); |
| 19 | + })(); |
54 | 20 |
|
55 | | - // Only observe childList changes in the shadow root |
56 | | - observer.observe(viewer.shadowRoot, { |
57 | | - childList: true, |
58 | | - subtree: true, |
59 | | - }); |
60 | | - } |
61 | | -
|
62 | | - return true; |
| 21 | + return () => { |
| 22 | + isDisposed = true; |
| 23 | + app?.dispose?.(); |
63 | 24 | }; |
64 | | -
|
65 | | - onMount(() => { |
66 | | - // Initial attempt to hide the logo |
67 | | - hideSplineLogo(); |
68 | | -
|
69 | | - // Set up an interval to continuously check for and hide the logo |
70 | | - checkInterval = window.setInterval(() => { |
71 | | - checkCount++; |
72 | | -
|
73 | | - // Stop checking after MAX_CHECKS to prevent infinite checking |
74 | | - if (checkCount >= MAX_CHECKS) { |
75 | | - if (checkInterval) { |
76 | | - clearInterval(checkInterval); |
77 | | - checkInterval = null; |
78 | | - } |
79 | | - isLoading = false; |
80 | | - return; |
81 | | - } |
82 | | -
|
83 | | - if (ensureShadowRootAccess()) { |
84 | | - hideSplineLogo(); |
85 | | - } |
86 | | - }, 100); |
87 | | -
|
88 | | - // Set up intersection observer for visibility |
89 | | - const intersectionObserver = new IntersectionObserver( |
90 | | - (entries) => { |
91 | | - isVisible = entries[0].isIntersecting; |
92 | | - }, |
93 | | - { threshold: 0.1 } |
94 | | - ); |
95 | | -
|
96 | | - const container = document.querySelector("#fact-token-container"); |
97 | | - if (container) { |
98 | | - intersectionObserver.observe(container); |
99 | | - } |
100 | | -
|
101 | | - return () => { |
102 | | - if (observer) { |
103 | | - observer.disconnect(); |
104 | | - } |
105 | | - if (checkInterval) { |
106 | | - clearInterval(checkInterval); |
107 | | - } |
108 | | - intersectionObserver.disconnect(); |
109 | | - }; |
110 | | - }); |
| 25 | + }); |
111 | 26 | </script> |
112 | 27 |
|
113 | 28 | <div |
114 | | - id="fact-token-container" |
115 | | - class="w-48 h-52 pointer-events-none sm:pointer-events-auto mt-8 relative" |
| 29 | + id="fact-token-container" |
| 30 | + class="w-48 h-52 pointer-events-none sm:pointer-events-auto mt-8 relative" |
116 | 31 | > |
117 | | - {#if isLoading} |
118 | | - <div class="absolute inset-0 flex items-center justify-center bg-secondary rounded-lg"> |
119 | | - <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div> |
120 | | - </div> |
121 | | - {/if} |
122 | | - <spline-viewer |
123 | | - id="fact-token" |
124 | | - url="https://prod.spline.design/YkOetzPdSoEqtenO/scene.splinecode" |
125 | | - style="opacity: {isVisible ? 1 : 0}; transition: opacity 0.3s ease-in-out;" |
126 | | - ></spline-viewer> |
| 32 | + <canvas id="fact-token" bind:this={canvas} class="w-full h-full"></canvas> |
127 | 33 | </div> |
0 commit comments