fix: workspace invite empty state flicker (#4150)

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">

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;
   };