feat: add anti-blink timer

src/main/webapp/src/hooks/useLoading.jsx

@@ -1,4 +1,4 @@
-import {createContext, useContext, useState} from "react";
+import {createContext, useContext, useEffect, useState} from "react";
 import './useLoading.css'
 import {FallingLines} from "react-loader-spinner";
 
@@ -28,9 +28,22 @@ export function LoadingProvider({children}) {
 
 function LoadingOverLay() {
     const showOverlay = useLoading()
+    const [realShow, setRealShow] = useState(showOverlay)
 
-    if (showOverlay) {
+    useEffect(() => {
-        return <div className="overlayBG" style={{position: showOverlay === 1 ? 'absolute' : 'fixed'}}>
+        if (showOverlay === 0) {
+            setRealShow(showOverlay)
+            return
+        }
+
+        const timer = setTimeout(() => {
+            setRealShow(showOverlay)
+        }, 100)
+        return () => clearTimeout(timer)
+    }, [showOverlay]);
+
+    if (realShow) {
+        return <div className="overlayBG" style={{position: realShow === 1 ? 'absolute' : 'fixed'}}>
             <div className="overlayContent" onClick={(e) => {
                 e.stopPropagation()
             }}>
@@ -40,4 +53,4 @@ function LoadingOverLay() {
     } else {
         return <></>
     }
-}
+}