fix: white flash when switching between workspaces

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -6,7 +6,7 @@ import ManageWorkspace, {
   useManageWorkspaceModal,
 } from "../../Modals/ManageWorkspace";
 import paths from "@/utils/paths";
-import { useParams, useNavigate, useMatch } from "react-router-dom";
+import { Link, useParams, useNavigate, useMatch } from "react-router-dom";
 import { GearSix, UploadSimple, DotsSixVertical } from "@phosphor-icons/react";
 import useUser from "@/hooks/useUser";
 import ThreadContainer from "./ThreadContainer";
@@ -117,12 +117,15 @@ export default function ActiveWorkspaces() {
                       role="listitem"
                     >
                       <div className="flex gap-x-2 items-center justify-between">
-                        <a
-                          href={
+                        <Link
+                          to={
                             isActive
-                              ? null
+                              ? "#"
                               : paths.workspace.chat(workspace.slug)
                           }
+                          onClick={(e) => {
+                            if (isActive) e.preventDefault();
+                          }}
                           aria-current={isActive ? "page" : ""}
                           className={`
                             transition-all duration-[200ms]
@@ -208,7 +211,7 @@ export default function ActiveWorkspaces() {
                               </div>
                             )}
                           </div>
-                        </a>
+                        </Link>
                       </div>
                       {isActive && (
                         <ThreadContainer

frontend/src/components/Sidebar/SearchBox/index.jsx

@@ -172,7 +172,6 @@ function SearchResultItem({ to, name, hint }) {
   return (
     <Link
       to={to}
-      reloadDocument={true}
       onClick={() => window.dispatchEvent(new Event(SEARCH_RESULT_SELECTED))}
       className="hover:bg-[#FFF]/10 light:hover:bg-[#000]/10 transition-all duration-300 rounded-sm px-[8px] py-[2px]"
     >

frontend/src/pages/WorkspaceChat/index.jsx

@@ -9,6 +9,7 @@ import { FullScreenLoader } from "@/components/Preloader";
 import { LAST_VISITED_WORKSPACE } from "@/utils/constants";
 
 export default function WorkspaceChat() {
+  const { slug } = useParams();
   const { loading, requiresAuth, mode } = usePasswordModal();
 
   if (loading) return <FullScreenLoader />;
@@ -16,7 +17,12 @@ export default function WorkspaceChat() {
     return <>{requiresAuth !== null && <PasswordModal mode={mode} />}</>;
   }
 
-  return <ShowWorkspaceChat />;
+  return (
+    <div className="w-screen h-screen overflow-hidden bg-zinc-950 light:bg-slate-50 flex">
+      {!isMobile && <Sidebar />}
+      <ShowWorkspaceChat key={slug ?? "default"} />
+    </div>
+  );
 }
 
 function ShowWorkspaceChat() {
@@ -52,15 +58,10 @@ function ShowWorkspaceChat() {
   }, []);
 
   return (
-    <>
-      <div className="w-screen h-screen overflow-hidden bg-zinc-950 light:bg-slate-50 flex">
-        {!isMobile && <Sidebar />}
-        <WorkspaceChatContainer
-          key={threadSlug ?? "default"}
-          loading={loading}
-          workspace={workspace}
-        />
-      </div>
-    </>
+    <WorkspaceChatContainer
+      key={threadSlug ?? "default"}
+      loading={loading}
+      workspace={workspace}
+    />
   );
 }