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

@@ -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;

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>

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} />

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 />

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 />

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 />

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 />