From a8fcaf1f483ae73ce084b108ad137849fc17ab78 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Mon, 27 May 2024 19:25:31 +0530 Subject: [PATCH] fix: project empty state flicker (#4609) --- web/components/project/card-list.tsx | 6 +++--- web/store/project/project.store.ts | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx index 5f830c1f9..97ebc1b14 100644 --- a/web/components/project/card-list.tsx +++ b/web/components/project/card-list.tsx @@ -16,9 +16,11 @@ export const ProjectCardList = observer(() => { // store hooks const { toggleCreateProjectModal } = useCommandPalette(); const { setTrackElement } = useEventTracker(); - const { workspaceProjectIds, filteredProjectIds, getProjectById } = useProject(); + const { workspaceProjectIds, filteredProjectIds, getProjectById, loader } = useProject(); const { searchQuery, currentWorkspaceDisplayFilters } = useProjectFilter(); + if (!filteredProjectIds || !workspaceProjectIds || loader) return ; + if (workspaceProjectIds?.length === 0 && !currentWorkspaceDisplayFilters?.archived_projects) return ( { /> ); - if (!filteredProjectIds) return ; - if (filteredProjectIds.length === 0) return (
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts index 5a57aa215..9916faca4 100644 --- a/web/store/project/project.store.ts +++ b/web/store/project/project.store.ts @@ -14,6 +14,7 @@ import { RootStore } from "../root.store"; export interface IProjectStore { // observables + loader: boolean; projectMap: { [projectId: string]: IProject; // projectId: project Info }; @@ -47,6 +48,7 @@ export interface IProjectStore { export class ProjectStore implements IProjectStore { // observables + loader: boolean = false; projectMap: { [projectId: string]: IProject; // projectId: project Info } = {}; @@ -62,6 +64,7 @@ export class ProjectStore implements IProjectStore { constructor(_rootStore: RootStore) { makeObservable(this, { // observables + loader: observable.ref, projectMap: observable, // computed filteredProjectIds: computed, @@ -208,15 +211,18 @@ export class ProjectStore implements IProjectStore { */ fetchProjects = async (workspaceSlug: string) => { try { + this.loader = true; const projectsResponse = await this.projectService.getProjects(workspaceSlug); runInAction(() => { projectsResponse.forEach((project) => { set(this.projectMap, [project.id], project); }); + this.loader = false; }); return projectsResponse; } catch (error) { console.log("Failed to fetch project from workspace store"); + this.loader = false; throw error; } };