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 <ProjectsLoader />;
+
   if (workspaceProjectIds?.length === 0 && !currentWorkspaceDisplayFilters?.archived_projects)
     return (
       <EmptyState
@@ -30,8 +32,6 @@ export const ProjectCardList = observer(() => {
       />
     );
 
-  if (!filteredProjectIds) return <ProjectsLoader />;
-
   if (filteredProjectIds.length === 0)
     return (
       <div className="grid h-full w-full place-items-center">
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;
     }
   };