fix: not authorized flicker (#5593)

web/core/layouts/auth-layout/workspace-wrapper.tsx

@@ -40,7 +40,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   } = useMember();
   const { workspaces } = useWorkspace();
   const { isMobile } = usePlatformOS();
-  const { workspaceInfoBySlug, fetchUserWorkspaceInfo, fetchUserProjectPermissions, allowPermissions } =
+  const { loader, workspaceInfoBySlug, fetchUserWorkspaceInfo, fetchUserProjectPermissions, allowPermissions } =
     useUserPermissions();
   // derived values
   const canPerformWorkspaceMemberActions = allowPermissions(
@@ -102,7 +102,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   const currentWorkspaceInfo = workspaceSlug && workspaceInfoBySlug(workspaceSlug.toString());
 
   // 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/core/store/user/permissions.store.ts

@@ -23,6 +23,7 @@ import { CoreRootStore } from "@/store/root.store";
 const workspaceService = new WorkspaceService();
 
 export interface IUserPermissionStore {
+  loader: boolean;
   // observables
   workspaceUserInfo: Record<string, IWorkspaceMemberMe>; // workspaceSlug -> IWorkspaceMemberMe
   projectUserInfo: Record<string, Record<string, IProjectMember>>; // workspaceSlug -> projectId -> IProjectMember
@@ -52,6 +53,7 @@ export interface IUserPermissionStore {
 }
 
 export class UserPermissionStore implements IUserPermissionStore {
+  loader: boolean = false;
   // constants
   workspaceUserInfo: Record<string, IWorkspaceMemberMe> = {};
   projectUserInfo: Record<string, Record<string, IProjectMember>> = {};
@@ -61,6 +63,7 @@ export class UserPermissionStore implements IUserPermissionStore {
   constructor(private store: CoreRootStore) {
     makeObservable(this, {
       // observables
+      loader: observable.ref,
       workspaceUserInfo: observable,
       projectUserInfo: observable,
       workspaceProjectsPermissions: observable,
@@ -156,15 +159,18 @@ export class UserPermissionStore implements IUserPermissionStore {
    */
   fetchUserWorkspaceInfo = async (workspaceSlug: string): Promise<IWorkspaceMemberMe | undefined> => {
     try {
+      this.loader = true;
       const response = await workspaceService.workspaceMemberMe(workspaceSlug);
       if (response) {
         runInAction(() => {
           set(this.workspaceUserInfo, [workspaceSlug], response);
+          this.loader = false;
         });
       }
       return response;
     } catch (error) {
       console.error("Error fetching user workspace information", error);
+      this.loader = false;
       throw error;
     }
   };