fix: Don't render LoadingSpinner after it has faded out (#5164)

wireapp · Nov 25, 2021 · ce413c1 · ce413c1
1 parent d2cb074
commit ce413c1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/electron/renderer/src/components/LoadingSpinner.css b/electron/renderer/src/components/LoadingSpinner.css
@@ -19,6 +19,7 @@
 
 .loading-spinner-wrapper {
   height: 100vh;
+  display: flex;
   position: absolute;
   width: 100%;
   z-index: 2;

diff --git a/electron/renderer/src/components/LoadingSpinner.jsx b/electron/renderer/src/components/LoadingSpinner.jsx
@@ -22,8 +22,11 @@ import {FlexBox, Loading, COLOR} from '@wireapp/react-ui-kit';
 
 import './LoadingSpinner.css';
 
+const TRANSITION_GRACE_PERIOD_MS = 500;
+
 const LoadingSpinner = ({visible, webviewRef}) => {
   const [isLoading, setIsLoading] = useState(true);
+  const [isFinished, setIsFinished] = useState(false);
 
   useEffect(() => {
     const webview = webviewRef.current;
@@ -37,13 +40,30 @@ const LoadingSpinner = ({visible, webviewRef}) => {
     }
   });
 
+  useEffect(() => {
+    if (!isLoading) {
+      let timeout = setTimeout(() => {
+        timeout = null;
+        setIsFinished(true);
+      }, TRANSITION_GRACE_PERIOD_MS);
+
+      return () => {
+        if (timeout !== null) {
+          clearTimeout(timeout);
+        }
+      };
+    }
+  }, [isLoading]);
+
+  if (!visible || isFinished) {
+    return null;
+  }
   return (
     <div
       className="loading-spinner-wrapper"
       data-uie-name="loading-spinner-wrapper"
       style={{
         backgroundColor: COLOR.GRAY_LIGHTEN_88,
-        display: visible ? 'flex' : 'none',
         opacity: isLoading ? 1 : 0,
         pointerEvents: isLoading ? 'all' : 'none',
       }}