fix: breadcrumb loading state for the issue details page (#3892)

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/components/headers/project-archived-issue-details.tsx

@@ -13,7 +13,6 @@ import { ProjectLogo } from "components/project";
 // ui
 // types
 import { IssueArchiveService } from "services/issue";
-import { TIssue } from "@plane/types";
 // constants
 // services
 // helpers
@@ -26,9 +25,9 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, archivedIssueId } = router.query;
   // store hooks
-  const { currentProjectDetails, getProjectById } = useProject();
+  const { currentProjectDetails } = useProject();
 
-  const { data: issueDetails } = useSWR<TIssue | undefined>(
+  const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
     workspaceSlug && projectId && archivedIssueId
       ? () =>
@@ -79,8 +78,9 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
               link={
                 <BreadcrumbLink
                   label={
-                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
-                    "..."
+                    currentProjectDetails && issueDetails
+                      ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
+                      : ""
                   }
                 />
               }

web/components/headers/project-issue-details.tsx

@@ -1,41 +1,32 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import useSWR from "swr";
 // hooks
 import { PanelRight } from "lucide-react";
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { ISSUE_DETAILS } from "constants/fetch-keys";
 import { cn } from "helpers/common.helper";
-import { useApplication, useProject } from "hooks/store";
+import { useApplication, useIssueDetail, useProject } from "hooks/store";
 // ui
 // helpers
 // services
-import { IssueService } from "services/issue";
 import { ProjectLogo } from "components/project";
 // constants
 // components
 
-// services
-const issueService = new IssueService();
-
 export const ProjectIssueDetailsHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
   // store hooks
-  const { currentProjectDetails, getProjectById } = useProject();
+  const { currentProjectDetails } = useProject();
   const { theme: themeStore } = useApplication();
-
-  const { data: issueDetails } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
-      : null
-  );
-
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
   const isSidebarCollapsed = themeStore.issueDetailSidebarCollapsed;
 
   return (
@@ -77,8 +68,9 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
               link={
                 <BreadcrumbLink
                   label={
-                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
-                    "..."
+                    currentProjectDetails && issueDetails
+                      ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
+                      : ""
                   }
                 />
               }

web/components/project/integration-card.tsx

@@ -13,7 +13,6 @@ import GithubLogo from "public/logos/github-square.png";
 import SlackLogo from "public/services/slack.png";
 // types
 import { IWorkspaceIntegration } from "@plane/types";
-// services
 import { ProjectService } from "services/project";
 
 type Props = {