defer ping animation

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>
   )