Add a debounce delay to avoid user flickering

Murray-Bridge-Bunyips · Aug 21, 2023 · d434274 · d434274
1 parent f88df4c
commit d434274
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/src/chat/Message.tsx b/src/chat/Message.tsx
@@ -135,24 +135,22 @@ function Message(props: { isAdmin: boolean; message: MessageData; key: string })
                             </p>
                         ) : message.uid === auth.currentUser?.uid ? (
                             <>
-                                <p className="text">
-                                    <div className="waiting">
+                                <div className="text">
+                                    <p className="waiting">
                                         <i>
                                             Your message content is currently not visible as it has not been reviewed.
                                             <br />
                                             Please wait for an admin to review it.
                                         </i>
                                         <br />
-                                    </div>
+                                    </p>
                                     {messageText}
-                                </p>
+                                </div>
                             </>
                         ) : (
-                            <>
-                                <p className="text">
-                                    <i>&lt;under review&gt;</i>
-                                </p>
-                            </>
+                            <p className="text">
+                                <i>&lt;under review&gt;</i>
+                            </p>
                         )
                     ) : (
                         <p className="text">{messageText}</p>

diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx
@@ -30,9 +30,7 @@ function Navbar() {
             date.setTime(Date.now());
             setCurrentTime(date.toLocaleTimeString("en-AU", { hour12: true }));
         }, 1000);
-        return () => {
-            clearInterval(timer);
-        };
+        return () => clearInterval(timer);
     }, []);
 
     /*
@@ -66,9 +64,13 @@ function Navbar() {
                 allOffline.push(user[1]);
             }
         });
-        setOnlineUsers(allOnline);
-        setOfflineUsers(allOffline);
-        setUnknownUsers(allUnknown);
+        // Debounce the setting of the state to prevent unnecessary rerenders
+        const debounceTimeout = setTimeout(() => {
+            setOnlineUsers(allOnline);
+            setOfflineUsers(allOffline);
+            setUnknownUsers(allUnknown);
+        }, 1000);
+        return () => clearTimeout(debounceTimeout);
     }, [userData]);
 
     return (

diff --git a/src/windows/FilterWindow.tsx b/src/windows/FilterWindow.tsx
@@ -67,7 +67,6 @@ function FilterWindow() {
         if (index > -1) {
             oldStorage.splice(index, 1);
             localStorage.setItem("filterlist", JSON.stringify(oldStorage));
-            oldStorage[oldStorage.length - 1]
             setBlacklist(oldStorage);
         }
     }