From 36152ea2fa591d69cf42770fa43bcba377fe4db8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 1 Nov 2023 20:24:57 +0530
Subject: [PATCH] chore: loading state for all layouts (#2588)

* chore: add loading states to layouts

* chore: don't show count for 0 inbox issues
---
 web/components/gantt-chart/chart/index.tsx               | 4 ++++
 web/components/headers/project-issues.tsx                | 8 +++++---
 .../issues/issue-layouts/roots/cycle-layout-root.tsx     | 9 +++++++++
 .../issue-layouts/roots/global-view-layout-root.tsx      | 9 +++++++++
 .../issues/issue-layouts/roots/module-layout-root.tsx    | 9 +++++++++
 .../issues/issue-layouts/roots/project-layout-root.tsx   | 8 ++++++++
 .../issue-layouts/roots/project-view-layout-root.tsx     | 8 ++++++++
 7 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index 82a7ed614..abd0c5e8a 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -165,6 +165,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
     const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
 
+    if (!scrollContainer) return;
+
     const clientVisibleWidth: number = scrollContainer?.clientWidth;
     let scrollWidth: number = 0;
     let daysDifference: number = 0;
@@ -193,6 +195,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const onScroll = () => {
     const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
 
+    if (!scrollContainer) return;
+
     const scrollWidth: number = scrollContainer?.scrollWidth;
     const clientVisibleWidth: number = scrollContainer?.clientWidth;
     const currentScrollPosition: number = scrollContainer?.scrollLeft;
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index f1d748e10..55e44173a 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -174,9 +174,11 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               <a>
                 <Button variant="neutral-primary" size="sm" className="relative">
                   Inbox
-                  <span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
-                    {inboxDetails.pending_issue_count}
-                  </span>
+                  {inboxDetails.pending_issue_count > 0 && (
+                    <span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
+                      {inboxDetails.pending_issue_count}
+                    </span>
+                  )}
                 </Button>
               </a>
             </Link>
diff --git a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
index 8658dbd30..29d91cae8 100644
--- a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -15,6 +15,8 @@ import {
   CycleSpreadsheetLayout,
 } from "components/issues";
 import { TransferIssues, TransferIssuesModal } from "components/cycles";
+// ui
+import { Spinner } from "@plane/ui";
 // helpers
 import { getDateRangeStatus } from "helpers/date-time.helper";
 
@@ -57,6 +59,13 @@ export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
 
   const issueCount = cycleIssueStore.getIssuesCount;
 
+  if (!cycleIssueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
   return (
     <>
       <TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
diff --git a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
index 77b3b6ee5..018a63d2a 100644
--- a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
@@ -6,6 +6,8 @@ import useSWR from "swr";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
 // types
 import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
 
@@ -82,6 +84,13 @@ export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
     ? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
     : undefined;
 
+  if (!issues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
   return (
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <GlobalViewsAppliedFiltersRoot />
diff --git a/web/components/issues/issue-layouts/roots/module-layout-root.tsx b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
index 705c4ad02..d4f1efb28 100644
--- a/web/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -15,6 +15,8 @@ import {
   ModuleListLayout,
   ModuleSpreadsheetLayout,
 } from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
 
 type Props = {
   openIssuesListModal: () => void;
@@ -53,6 +55,13 @@ export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
 
   const issueCount = moduleIssueStore.getIssuesCount;
 
+  if (!moduleIssueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
   return (
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <ModuleAppliedFiltersRoot />
diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
index 0cd5911a5..6990c43ef 100644
--- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -14,6 +14,7 @@ import {
   ProjectSpreadsheetLayout,
   ProjectEmptyState,
 } from "components/issues";
+import { Spinner } from "@plane/ui";
 
 export const ProjectLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
@@ -33,6 +34,13 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
 
   const issueCount = issueStore.getIssuesCount;
 
+  if (!issueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
   return (
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <ProjectAppliedFiltersRoot />
diff --git a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
index dfb69e63a..ce8051dea 100644
--- a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -15,6 +15,7 @@ import {
   ProjectViewGanttLayout,
   ProjectViewSpreadsheetLayout,
 } from "components/issues";
+import { Spinner } from "@plane/ui";
 
 export const ProjectViewLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
@@ -51,6 +52,13 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
 
   const issueCount = projectViewIssuesStore.getIssuesCount;
 
+  if (!projectViewIssuesStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
   return (
     <div className="relative h-full w-full flex flex-col overflow-hidden">
       <ProjectViewAppliedFiltersRoot />