diff --git a/web/components/pages/pages-list/archived-pages-list.tsx b/web/components/pages/pages-list/archived-pages-list.tsx index 4e679fb6de..a14034daf6 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 ( +
+ +
+ ); + } if (!archivedPageIds) return ( diff --git a/web/store/project-page.store.ts b/web/store/project-page.store.ts index 925d25e510..dabb42ca5d 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>; projectArchivedPageMap: Record>; @@ -32,6 +33,7 @@ export interface IProjectPageStore { export class ProjectPageStore implements IProjectPageStore { loader: boolean = false; + archivedProjectLoader: boolean = false; projectPageMap: Record> = {}; // { projectId: [page1, page2] } projectArchivedPageMap: Record> = {}; // { 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; } };