defer ping animation

app/web/src/components/DelayedPingAnimation/DelayedPingAnimation.tsx

@@ -0,0 +1,29 @@
+
+
+let timeoutId = 0
+const DelayedPingAnimation = ({isLoading: isLoading}: {isLoading: boolean}) => {
+  const [showLoading, setShowLoading] = React.useState(false)
+  React.useEffect(() => {
+    if (!isLoading && showLoading) {
+      setShowLoading(isLoading)
+      clearTimeout(timeoutId)
+    } else if (isLoading && !showLoading) {
+      timeoutId = setTimeout(() => {
+        setShowLoading(isLoading)
+        console.log('setloading')
+      }, 300) as unknown as number
+    } else if (!isLoading) {
+      setShowLoading(isLoading)
+      clearTimeout(timeoutId)
+    }
+  }, [isLoading])
+
+  if (showLoading && isLoading) return (
+    <div className="inset-0 absolute flex items-center justify-center">
+      <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
+    </div>
+  )
+  return null
+}
+
+export default DelayedPingAnimation

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -7,6 +7,7 @@ import { requestRender } from 'src/helpers/hooks/useIdeState'
 import texture from './dullFrontLitMetal.png'
 import { TextureLoader } from 'three/src/loaders/TextureLoader'
 import Customizer from 'src/components/Customizer/Customizer'
+ import DelayedPingAnimation from 'src/components/DelayedPingAnimation/DelayedPingAnimation'
 
 const loader = new TextureLoader()
 const colorMap = loader.load(texture)
@@ -240,11 +241,7 @@ const IdeViewer = ({ Loading }) => {
           />
         </Canvas>
       </div>
-      {state.isLoading && (
-        <div className="inset-0 absolute flex items-center justify-center">
-          <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-        </div>
-      )}
+      <DelayedPingAnimation isLoading={state.isLoading} />
       <Customizer />
     </div>
   )