From 24adddd29ff84e75738beeea3d52003dafa969c4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 20 Jun 2024 16:08:14 +0530
Subject: [PATCH] [WEB-1647] chore: breadcrumb items loader (#4887)

* chore: breadcrumb item loader added

* chore: breadcrumb item loader implementation
---
 packages/ui/src/breadcrumbs/breadcrumbs.tsx      | 16 +++++++++++++---
 .../(detail)/[projectId]/archives/header.tsx     |  4 ++--
 .../archives/issues/(detail)/header.tsx          |  4 ++--
 .../[projectId]/cycles/(detail)/header.tsx       | 16 +++++++++++-----
 .../[projectId]/cycles/(list)/header.tsx         |  4 ++--
 .../(detail)/[projectId]/draft-issues/header.tsx | 11 ++++++++---
 .../(detail)/[projectId]/inbox/header.tsx        |  4 ++--
 .../[projectId]/issues/(detail)/header.tsx       |  4 ++--
 .../[projectId]/issues/(list)/header.tsx         | 14 ++++++++++----
 .../[projectId]/modules/(detail)/header.tsx      | 16 +++++++++++-----
 .../[projectId]/modules/(list)/header.tsx        |  4 ++--
 .../[projectId]/pages/(detail)/header.tsx        |  4 ++--
 .../(detail)/[projectId]/pages/(list)/header.tsx |  4 ++--
 .../(detail)/[projectId]/settings/header.tsx     |  4 ++--
 .../views/(detail)/[viewId]/header.tsx           | 11 ++++++++---
 .../(detail)/[projectId]/views/(list)/header.tsx |  4 ++--
 .../(projects)/settings/header.tsx               |  4 ++--
 17 files changed, 83 insertions(+), 45 deletions(-)

diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 253e8308e..031825691 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -4,9 +4,10 @@ import { ChevronRight } from "lucide-react";
 type BreadcrumbsProps = {
   children: React.ReactNode;
   onBack?: () => void;
+  isLoading?: boolean;
 };
 
-const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
+const Breadcrumbs = ({ children, onBack, isLoading = false }: BreadcrumbsProps) => {
   const [isSmallScreen, setIsSmallScreen] = React.useState(false);
 
   React.useEffect(() => {
@@ -21,6 +22,13 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
 
   const childrenArray = React.Children.toArray(children);
 
+  const BreadcrumbItemLoader = (
+    <div className="flex items-center gap-1 animate-pulse">
+      <span className="h-5 w-5 bg-custom-background-80 rounded" />
+      <span className="h-5 w-16 bg-custom-background-80 rounded" />
+    </div>
+  );
+
   return (
     <div className="flex items-center space-x-2 overflow-hidden">
       {!isSmallScreen && (
@@ -33,7 +41,7 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
                 </div>
               )}
               <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? "hidden sm:flex" : "flex"}`}>
-                {child}
+                {isLoading ? BreadcrumbItemLoader : child}
               </div>
             </React.Fragment>
           ))}
@@ -50,7 +58,9 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
             )}
             <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
           </div>
-          <div className="flex items-center gap-2.5">{childrenArray[childrenArray.length - 1]}</div>
+          <div className="flex items-center gap-2.5">
+            {isLoading ? BreadcrumbItemLoader : childrenArray[childrenArray.length - 1]}
+          </div>
         </>
       )}
       {isSmallScreen && childrenArray.length === 1 && childrenArray}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index adc662640..8d7e93406 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -25,7 +25,7 @@ export const ProjectArchivesHeader: FC = observer(() => {
   const {
     issuesFilter: { issueFilters },
   } = useIssues(EIssuesStoreType.ARCHIVED);
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   // hooks
   const { isMobile } = usePlatformOS();
 
@@ -42,7 +42,7 @@ export const ProjectArchivesHeader: FC = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="flex items-center gap-2.5">
-          <Breadcrumbs onBack={router.back}>
+          <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
index 9190a7c0b..e09438587 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@@ -21,7 +21,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
   // router
   const { workspaceSlug, projectId, archivedIssueId } = useParams();
   // store hooks
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
 
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
@@ -39,7 +39,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 95dae2512..c12e4b07a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -15,7 +15,12 @@ import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import {
+  EIssueFilterType,
+  EIssueLayoutTypes,
+  EIssuesStoreType,
+  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
+} from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -79,7 +84,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
   const {
@@ -160,7 +165,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
       <div className="relative z-[15] w-full items-center gap-x-2 gap-y-4">
         <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
-            <Breadcrumbs onBack={router.back}>
+            <Breadcrumbs onBack={router.back} isLoading={loader}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
@@ -209,8 +214,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                           {issuesCount && issuesCount > 0 ? (
                             <Tooltip
                               isMobile={isMobile}
-                              tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"
-                                } in this cycle`}
+                              tooltipContent={`There are ${issuesCount} ${
+                                issuesCount > 1 ? "issues" : "issue"
+                              } in this cycle`}
                               position="bottom"
                             >
                               <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index 664284c84..f38fe94f2 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -24,7 +24,7 @@ export const CyclesListHeader: FC = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
 
   const canUserCreateCycle =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -33,7 +33,7 @@ export const CyclesListHeader: FC = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
-          <Breadcrumbs onBack={router.back}>
+          <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
index 227cdd982..1cede3ee3 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
@@ -11,7 +11,12 @@ import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import { EIssueFilterType, EIssuesStoreType, EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import {
+  EIssueFilterType,
+  EIssuesStoreType,
+  EIssueLayoutTypes,
+  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
+} from "@/constants/issue";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
@@ -25,7 +30,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.DRAFT);
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
   const {
@@ -91,7 +96,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="flex items-center gap-2.5">
-          <Breadcrumbs>
+          <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
index 043bf84eb..aecedb8ad 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
@@ -18,14 +18,14 @@ export const ProjectInboxHeader: FC = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams();
   // store hooks
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader: currentProjectDetailsLoader } = useProject();
   const { loader } = useProjectInbox();
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="flex items-center gap-4">
-          <Breadcrumbs>
+          <Breadcrumbs isLoading={currentProjectDetailsLoader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
index 641603d45..9f0747cce 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
@@ -19,7 +19,7 @@ export const ProjectIssueDetailsHeader = observer(() => {
   const router = useAppRouter();
   const { workspaceSlug, projectId, issueId } = useParams();
   // store hooks
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { issueDetailSidebarCollapsed, toggleIssueDetailSidebar } = useAppTheme();
   const {
     issue: { getIssueById },
@@ -32,7 +32,7 @@ export const ProjectIssueDetailsHeader = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
-          <Breadcrumbs onBack={router.back}>
+          <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
index fc7492a22..351d5cc4a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
@@ -14,7 +14,12 @@ import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import { EIssueFilterType, EIssuesStoreType, EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import {
+  EIssueFilterType,
+  EIssuesStoreType,
+  EIssueLayoutTypes,
+  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
+} from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { SPACE_BASE_URL } from "@/helpers/common.helper";
@@ -52,7 +57,7 @@ export const ProjectIssuesHeader = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
   const { isMobile } = usePlatformOS();
@@ -122,7 +127,7 @@ export const ProjectIssuesHeader = observer(() => {
       <div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <div className="flex items-center gap-2.5">
-            <Breadcrumbs onBack={() => router.back()}>
+            <Breadcrumbs onBack={() => router.back()} isLoading={loader}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
@@ -178,7 +183,8 @@ export const ProjectIssuesHeader = observer(() => {
         </div>
         <div className="items-center gap-2 hidden md:flex">
           <LayoutSelection
-            layouts={[EIssueLayoutTypes.LIST,
+            layouts={[
+              EIssueLayoutTypes.LIST,
               EIssueLayoutTypes.KANBAN,
               EIssueLayoutTypes.CALENDAR,
               EIssueLayoutTypes.SPREADSHEET,
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 63b9ef1ce..16372e19c 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -15,7 +15,12 @@ import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import { EIssuesStoreType, EIssueFilterType, EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import {
+  EIssuesStoreType,
+  EIssueFilterType,
+  EIssueLayoutTypes,
+  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
+} from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -81,7 +86,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { projectLabels } = useLabel();
   const { projectStates } = useProjectState();
   const {
@@ -160,7 +165,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
       <div className="relative z-[15] items-center gap-x-2 gap-y-4">
         <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
-            <Breadcrumbs onBack={router.back}>
+            <Breadcrumbs onBack={router.back} isLoading={loader}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
@@ -209,8 +214,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                           {issuesCount && issuesCount > 0 ? (
                             <Tooltip
                               isMobile={isMobile}
-                              tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"
-                                } in this module`}
+                              tooltipContent={`There are ${issuesCount} ${
+                                issuesCount > 1 ? "issues" : "issue"
+                              } in this module`}
                               position="bottom"
                             >
                               <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index c2b0a6cc5..87747e29f 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -23,7 +23,7 @@ export const ModulesListHeader: React.FC = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
 
   // auth
   const canUserCreateModule =
@@ -33,7 +33,7 @@ export const ModulesListHeader: React.FC = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
-          <Breadcrumbs onBack={router.back}>
+          <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index be903635c..cf72be3f2 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -28,7 +28,7 @@ export const PageDetailsHeader = observer(() => {
   // state
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? "");
   // use platform
   const { platform } = usePlatformOS();
@@ -59,7 +59,7 @@ export const PageDetailsHeader = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
index c3cee8e37..87a137224 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@@ -23,7 +23,7 @@ export const PagesListHeader = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { setTrackElement } = useEventTracker();
 
   const canUserCreatePage =
@@ -33,7 +33,7 @@ export const PagesListHeader = observer(() => {
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
index 39b42cef6..be9e3781a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
@@ -22,7 +22,7 @@ export const ProjectSettingHeader: FC = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
 
   if (currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER) return null;
 
@@ -31,7 +31,7 @@ export const ProjectSettingHeader: FC = observer(() => {
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <div className="z-50">
-            <Breadcrumbs onBack={router.back}>
+            <Breadcrumbs onBack={router.back} isLoading={loader}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 170880d97..8f2d23820 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -12,7 +12,12 @@ import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import { EIssuesStoreType, EIssueFilterType, EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import {
+  EIssuesStoreType,
+  EIssueFilterType,
+  EIssueLayoutTypes,
+  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
+} from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
@@ -42,7 +47,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
   const { projectViewIds, getViewById } = useProjectView();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
@@ -131,7 +136,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   return (
     <div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2">
-        <Breadcrumbs>
+        <Breadcrumbs isLoading={loader}>
           <Breadcrumbs.BreadcrumbItem
             type="text"
             link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
index ee5f0709c..a7e271425 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@@ -20,7 +20,7 @@ export const ProjectViewsHeader = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentProjectDetails } = useProject();
+  const { currentProjectDetails, loader } = useProject();
 
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -30,7 +30,7 @@ export const ProjectViewsHeader = observer(() => {
       <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <div>
-            <Breadcrumbs>
+            <Breadcrumbs isLoading={loader}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
diff --git a/web/app/[workspaceSlug]/(projects)/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
index aeaa80bb9..5407f79bc 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
@@ -11,13 +11,13 @@ import { BreadcrumbLink } from "@/components/common";
 import { useWorkspace } from "@/hooks/store";
 
 export const WorkspaceSettingHeader: FC = observer(() => {
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, loader } = useWorkspace();
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={