Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix loading workflow 3

Browse Source
This commit is contained in:
Aravind
2026-06-15 20:39:38 +05:30
parent 0560b86b87
commit 635bd4e7ba
2 changed files with 87 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/strategy/StrategySection.tsx
View File

@@ -149,6 +149,31 @@ export default function StrategySection({ connected = false }: { connected?: boo
return () => { clearTimeout(refresh); st.kill(); };
}, [scroll]);
// Top-level safety fallback: if canvas does not report ready within 4 seconds of mounting, force it.
useEffect(() => {
if (!mountScene) return;
const timer = setTimeout(() => {
setSceneReady((ready) => {
if (!ready) {
console.warn("StrategySection: Scene readiness fallback triggered.");
return true;
}
return ready;
});
}, 4000);
return () => clearTimeout(timer);
}, [mountScene]);
// Reliable loader cleanup: force showLoader(false) 300ms after sceneReady becomes true
useEffect(() => {
if (sceneReady) {
const timer = setTimeout(() => {
setShowLoader(false);
}, 300);
return () => clearTimeout(timer);
}
}, [sceneReady]);
// Intro hint fades out as the journey begins.
const introOpacity = useTransform(scroll, [0, 0.03, 0.06], [1, 1, 0]);
// Persistent header fades in after the intro.
@@ -182,11 +207,9 @@ export default function StrategySection({ connected = false }: { connected?: boo
role="status"
aria-live="polite"
aria-label="Loading MileTruth Strategy Engine"
onTransitionEnd={(e) => {
if (e.propertyName === "opacity" && sceneReady) setShowLoader(false);
}}
>
<span className="dm-st-loader__ring" />
<span className="dm-st-loader__text">Loading strategy engine...</span>
</div>
)}
@@ -310,25 +333,29 @@ const styles = `
}
.dm-st-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.25s; }
.dm-st-canvas.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-canvas canvas { display: block; }
.dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none;
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a;
opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.25s; }
.dm-st-ui.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-loader { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
background: transparent; opacity: 1; pointer-events: none;
.dm-st-loader { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 6;
display: flex; align-items: center; gap: 8px;
background: rgba(15,23,42,0.85); border: 1px solid rgba(255,255,255,0.08);
padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
opacity: 1; pointer-events: none;
animation: dmStLoaderFadeIn 0.2s ease both;
transition: opacity 0.3s ease; }
transition: opacity 0.25s ease; }
.dm-st-loader.is-hiding { opacity: 0; pointer-events: none; }
.dm-st-loader__ring { width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.48); border-top-color: #ffffff;
box-shadow: 0 8px 22px rgba(15,23,42,0.14);
animation: dm-hiw-spin 0.8s linear infinite; }
.dm-st-loader__ring { width: 14px; height: 14px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2); border-top-color: #00E5FF;
animation: dm-hiw-spin 0.8s linear infinite; box-sizing: border-box; }
.dm-st-loader__text { font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
color: #ffffff; font-size: 13.5px; font-weight: 500; opacity: 0.75; white-space: nowrap; }
@keyframes dmStLoaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-hiw-spin { to { transform: rotate(360deg); } }