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