From 699017014ee292bf7b884b2aa62cc11b5647cbc5 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:04:16 +0530
Subject: [PATCH] fix: workspace invite empty state flicker (#4150)

---
 web/layouts/auth-layout/workspace-wrapper.tsx | 4 ++--
 web/store/workspace/index.ts                  | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index 8b40597b2..8787a36dc 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -32,7 +32,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   const {
     workspace: { fetchWorkspaceMembers },
   } = useMember();
-  const { workspaces } = useWorkspace();
+  const { workspaces, loader } = useWorkspace();
   const { isMobile } = usePlatformOS();
 
   const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
@@ -84,7 +84,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   };
 
   // if list of workspaces are not there then we have to render the spinner
-  if (allWorkspaces === undefined) {
+  if (allWorkspaces === undefined || loader) {
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
diff --git a/web/store/workspace/index.ts b/web/store/workspace/index.ts
index 096e11f0d..ce4da598e 100644
--- a/web/store/workspace/index.ts
+++ b/web/store/workspace/index.ts
@@ -1,7 +1,7 @@
 import set from "lodash/set";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
-import { WorkspaceService } from "@/services/workspace.service";
 import { IWorkspace } from "@plane/types";
+import { WorkspaceService } from "@/services/workspace.service";
 import { RootStore } from "../root.store";
 // types
 // services
@@ -10,6 +10,7 @@ import { ApiTokenStore, IApiTokenStore } from "./api-token.store";
 import { IWebhookStore, WebhookStore } from "./webhook.store";
 
 export interface IWorkspaceRootStore {
+  loader: boolean;
   // observables
   workspaces: Record<string, IWorkspace>;
   // computed
@@ -30,6 +31,7 @@ export interface IWorkspaceRootStore {
 }
 
 export class WorkspaceRootStore implements IWorkspaceRootStore {
+  loader: boolean = false;
   // observables
   workspaces: Record<string, IWorkspace> = {};
   // services
@@ -43,6 +45,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
+      loader: observable.ref,
       // observables
       workspaces: observable,
       // computed
@@ -106,12 +109,14 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
    * fetch user workspaces from API
    */
   fetchWorkspaces = async () => {
+    this.loader = true;
     const workspaceResponse = await this.workspaceService.userWorkspaces();
     runInAction(() => {
       workspaceResponse.forEach((workspace) => {
         set(this.workspaces, [workspace.id], workspace);
       });
     });
+    this.loader = false;
     return workspaceResponse;
   };