fix: workspace invite empty state flicker (#4150)

This commit is contained in:
Anmol Singh Bhatia 2024-04-09 15:04:16 +05:30 committed by GitHub
parent 2d4547601d
commit 699017014e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 3 deletions

View File

@ -32,7 +32,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
const { const {
workspace: { fetchWorkspaceMembers }, workspace: { fetchWorkspaceMembers },
} = useMember(); } = useMember();
const { workspaces } = useWorkspace(); const { workspaces, loader } = useWorkspace();
const { isMobile } = usePlatformOS(); const { isMobile } = usePlatformOS();
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo; 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 list of workspaces are not there then we have to render the spinner
if (allWorkspaces === undefined) { if (allWorkspaces === undefined || loader) {
return ( return (
<div className="grid h-screen place-items-center bg-custom-background-100 p-4"> <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"> <div className="flex flex-col items-center gap-3 text-center">

View File

@ -1,7 +1,7 @@
import set from "lodash/set"; import set from "lodash/set";
import { action, computed, observable, makeObservable, runInAction } from "mobx"; import { action, computed, observable, makeObservable, runInAction } from "mobx";
import { WorkspaceService } from "@/services/workspace.service";
import { IWorkspace } from "@plane/types"; import { IWorkspace } from "@plane/types";
import { WorkspaceService } from "@/services/workspace.service";
import { RootStore } from "../root.store"; import { RootStore } from "../root.store";
// types // types
// services // services
@ -10,6 +10,7 @@ import { ApiTokenStore, IApiTokenStore } from "./api-token.store";
import { IWebhookStore, WebhookStore } from "./webhook.store"; import { IWebhookStore, WebhookStore } from "./webhook.store";
export interface IWorkspaceRootStore { export interface IWorkspaceRootStore {
loader: boolean;
// observables // observables
workspaces: Record<string, IWorkspace>; workspaces: Record<string, IWorkspace>;
// computed // computed
@ -30,6 +31,7 @@ export interface IWorkspaceRootStore {
} }
export class WorkspaceRootStore implements IWorkspaceRootStore { export class WorkspaceRootStore implements IWorkspaceRootStore {
loader: boolean = false;
// observables // observables
workspaces: Record<string, IWorkspace> = {}; workspaces: Record<string, IWorkspace> = {};
// services // services
@ -43,6 +45,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
constructor(_rootStore: RootStore) { constructor(_rootStore: RootStore) {
makeObservable(this, { makeObservable(this, {
loader: observable.ref,
// observables // observables
workspaces: observable, workspaces: observable,
// computed // computed
@ -106,12 +109,14 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
* fetch user workspaces from API * fetch user workspaces from API
*/ */
fetchWorkspaces = async () => { fetchWorkspaces = async () => {
this.loader = true;
const workspaceResponse = await this.workspaceService.userWorkspaces(); const workspaceResponse = await this.workspaceService.userWorkspaces();
runInAction(() => { runInAction(() => {
workspaceResponse.forEach((workspace) => { workspaceResponse.forEach((workspace) => {
set(this.workspaces, [workspace.id], workspace); set(this.workspaces, [workspace.id], workspace);
}); });
}); });
this.loader = false;
return workspaceResponse; return workspaceResponse;
}; };