From 1866474569cfc5ce02886fa535c7394153e1cf41 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 26 Feb 2024 19:44:01 +0530
Subject: [PATCH] chore: inbox layout loader and peek overview subscription
 improvement (#3803)

---
 web/components/issues/issue-detail/subscription.tsx    |  2 +-
 .../projects/[projectId]/inbox/[inboxId].tsx           | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/components/issues/issue-detail/subscription.tsx b/web/components/issues/issue-detail/subscription.tsx
index ab5983960..7321ef27f 100644
--- a/web/components/issues/issue-detail/subscription.tsx
+++ b/web/components/issues/issue-detail/subscription.tsx
@@ -67,7 +67,7 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
       >
         {loading ? (
           <span>
-            <span className="hidden sm:block">Loading</span>...
+            <span className="hidden sm:block">Loading...</span>
           </span>
         ) : isSubscribed ? (
           <div className="hidden sm:block">Unsubscribe</div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 125ee4245..de412c9d7 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -7,6 +7,7 @@ import { useProject, useInboxIssues } from "hooks/store";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
+import { InboxLayoutLoader } from "components/ui";
 import { PageHead } from "components/core";
 import { ProjectInboxHeader } from "components/headers";
 import { InboxSidebarRoot, InboxContentRoot } from "components/inbox";
@@ -23,7 +24,7 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
     issues: { fetchInboxIssues },
   } = useInboxIssues();
   // fetching the Inbox filters and issues
-  useSWR(
+  const { isLoading } = useSWR(
     workspaceSlug && projectId && currentProjectDetails && currentProjectDetails?.inbox_view
       ? `INBOX_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}`
       : null,
@@ -37,7 +38,12 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
   // derived values
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : undefined;
 
-  if (!workspaceSlug || !projectId || !inboxId || !currentProjectDetails?.inbox_view) return <></>;
+  if (!workspaceSlug || !projectId || !inboxId || !currentProjectDetails?.inbox_view || isLoading)
+    return (
+      <div className="flex h-full flex-col">
+        <InboxLayoutLoader />
+      </div>
+    );
 
   return (
     <>