From feaaf97dced5ca878c8e083f7c4834bf709cb8d0 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 21 Sep 2020 19:03:17 -0700
Subject: [PATCH] fix the broken loading delay again

Did it revert? Or did I just never notice that it only worked on mount, not on new loading states?

Also, fixed a bug where we were injecting the script tag way too much, and triggering loading too much that way too!
---
 src/app/components/OutfitPreview.js | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index 1a2ed5c..09e4cbe 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -102,10 +102,18 @@ export function OutfitLayers({
     false
   );
 
+  // When we start in a loading state, or re-enter a loading state, start the
+  // loading delay timer.
   React.useEffect(() => {
-    const t = setTimeout(() => setLoadingDelayHasPassed(true), loadingDelayMs);
-    return () => clearTimeout(t);
-  }, [loadingDelayMs]);
+    if (loading) {
+      setLoadingDelayHasPassed(false);
+      const t = setTimeout(
+        () => setLoadingDelayHasPassed(true),
+        loadingDelayMs
+      );
+      return () => clearTimeout(t);
+    }
+  }, [loadingDelayMs, loading]);
 
   React.useLayoutEffect(() => {
     function computeAndSizeCanvasSize() {
@@ -121,6 +129,8 @@ export function OutfitLayers({
     return () => window.removeEventListener("resize", computeAndSizeCanvasSize);
   }, [setCanvasSize]);
 
+  console.log(loading, scriptsLoading);
+
   return (
     <Box
       pos="relative"
@@ -274,6 +284,14 @@ function useScriptTag(src) {
   const [loading, setLoading] = React.useState(true);
 
   React.useEffect(() => {
+    const existingScript = document.querySelector(
+      `script[src=${CSS.escape(src)}]`
+    );
+    if (existingScript) {
+      setLoading(false);
+      return;
+    }
+
     let canceled = false;
     const script = document.createElement("script");
     script.onload = () => {