From 7fd625e0e3a820875d7ea49b3e256289b4d105d9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 25 Jan 2024 12:38:55 +0530
Subject: [PATCH] fix: project pages loader (#3461)

---
 .../pages/pages-list/archived-pages-list.tsx          | 11 +++++++++--
 web/store/project-page.store.ts                       |  9 ++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/components/pages/pages-list/archived-pages-list.tsx b/web/components/pages/pages-list/archived-pages-list.tsx
index 4e679fb6d..a14034daf 100644
--- a/web/components/pages/pages-list/archived-pages-list.tsx
+++ b/web/components/pages/pages-list/archived-pages-list.tsx
@@ -4,13 +4,20 @@ import { observer } from "mobx-react-lite";
 import { PagesListView } from "components/pages/pages-list";
 // hooks
 // ui
-import { Loader } from "@plane/ui";
+import { Loader, Spinner } from "@plane/ui";
 import { useProjectPages } from "hooks/store/use-project-specific-pages";
 
 export const ArchivedPagesList: FC = observer(() => {
   const projectPageStore = useProjectPages();
-  const { archivedPageIds } = projectPageStore;
+  const { archivedPageIds, archivedProjectLoader } = projectPageStore;
 
+  if (archivedProjectLoader) {
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <Spinner />
+      </div>
+    );
+  }
   if (!archivedPageIds)
     return (
       <Loader className="space-y-4">
diff --git a/web/store/project-page.store.ts b/web/store/project-page.store.ts
index 925d25e51..dabb42ca5 100644
--- a/web/store/project-page.store.ts
+++ b/web/store/project-page.store.ts
@@ -11,6 +11,7 @@ import { isThisWeek, isToday, isYesterday } from "date-fns";
 
 export interface IProjectPageStore {
   loader: boolean;
+  archivedProjectLoader: boolean;
   projectPageMap: Record<string, Record<string, IPageStore>>;
   projectArchivedPageMap: Record<string, Record<string, IPageStore>>;
 
@@ -32,6 +33,7 @@ export interface IProjectPageStore {
 
 export class ProjectPageStore implements IProjectPageStore {
   loader: boolean = false;
+  archivedProjectLoader: boolean = false;
   projectPageMap: Record<string, Record<string, IPageStore>> = {}; // { projectId: [page1, page2] }
   projectArchivedPageMap: Record<string, Record<string, IPageStore>> = {}; // { projectId: [page1, page2] }
 
@@ -42,6 +44,7 @@ export class ProjectPageStore implements IProjectPageStore {
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       loader: observable.ref,
+      archivedProjectLoader: observable.ref,
       projectPageMap: observable,
       projectArchivedPageMap: observable,
 
@@ -180,18 +183,18 @@ export class ProjectPageStore implements IProjectPageStore {
    */
   fetchArchivedProjectPages = async (workspaceSlug: string, projectId: string) => {
     try {
-      this.loader = true;
+      this.archivedProjectLoader = true;
       await this.pageService.getArchivedPages(workspaceSlug, projectId).then((response) => {
         runInAction(() => {
           for (const page of response) {
             set(this.projectArchivedPageMap, [projectId, page.id], new PageStore(page, this.rootStore));
           }
-          this.loader = false;
+          this.archivedProjectLoader = false;
         });
         return response;
       });
     } catch (e) {
-      this.loader = false;
+      this.archivedProjectLoader = false;
       throw e;
     }
   };