From 83bf28bb83d3d4a4e90eac66da1d729dcb94a8ad Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:40:03 +0530
Subject: [PATCH] chore: loading state improvement (#3657)

---
 .../issue-layouts/roots/cycle-layout-root.tsx      | 14 +-------------
 .../roots/draft-issue-layout-root.tsx              | 13 +------------
 .../issue-layouts/roots/module-layout-root.tsx     | 14 +-------------
 .../roots/project-view-layout-root.tsx             | 13 +------------
 4 files changed, 4 insertions(+), 50 deletions(-)

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 95204b5e5..402103072 100644
--- a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -17,8 +17,6 @@ import {
 } from "components/issues";
 import { TransferIssues, TransferIssuesModal } from "components/cycles";
 import { ActiveLoader } from "components/ui";
-// ui
-import { Spinner } from "@plane/ui";
 // constants
 import { EIssuesStoreType } from "constants/issue";
 
@@ -56,17 +54,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
   if (!workspaceSlug || !projectId || !cycleId) return <></>;
 
   if (issues?.loader === "init-loader" || !issues?.groupedIssueIds) {
-    return (
-      <>
-        {activeLayout ? (
-          <ActiveLoader layout={activeLayout} />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
-          </div>
-        )}
-      </>
-    );
+    return <>{activeLayout && <ActiveLoader layout={activeLayout} />}</>;
   }
 
   return (
diff --git a/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
index 2528baf69..ede0dde30 100644
--- a/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
@@ -11,7 +11,6 @@ import { ProjectDraftEmptyState } from "../empty-states";
 import { IssuePeekOverview } from "components/issues/peek-overview";
 import { ActiveLoader } from "components/ui";
 // ui
-import { Spinner } from "@plane/ui";
 import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
 // constants
 import { EIssuesStoreType } from "constants/issue";
@@ -42,17 +41,7 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
   if (!workspaceSlug || !projectId) return <></>;
 
   if (issues?.loader === "init-loader" || !issues?.groupedIssueIds) {
-    return (
-      <>
-        {activeLayout ? (
-          <ActiveLoader layout={activeLayout} />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
-          </div>
-        )}
-      </>
-    );
+    return <>{activeLayout && <ActiveLoader layout={activeLayout} />}</>;
   }
 
   return (
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 5adc33d78..dfce3022f 100644
--- a/web/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -16,8 +16,6 @@ import {
   ModuleSpreadsheetLayout,
 } from "components/issues";
 import { ActiveLoader } from "components/ui";
-// ui
-import { Spinner } from "@plane/ui";
 // constants
 import { EIssuesStoreType } from "constants/issue";
 
@@ -50,17 +48,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout || undefined;
 
   if (issues?.loader === "init-loader" || !issues?.groupedIssueIds) {
-    return (
-      <>
-        {activeLayout ? (
-          <ActiveLoader layout={activeLayout} />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
-          </div>
-        )}
-      </>
-    );
+    return <>{activeLayout && <ActiveLoader layout={activeLayout} />}</>;
   }
 
   return (
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 2e55a499d..2329e52df 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,7 +15,6 @@ import {
   ProjectViewListLayout,
   ProjectViewSpreadsheetLayout,
 } from "components/issues";
-import { Spinner } from "@plane/ui";
 import { ActiveLoader } from "components/ui";
 // constants
 import { EIssuesStoreType } from "constants/issue";
@@ -66,17 +65,7 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
   if (!workspaceSlug || !projectId || !viewId) return <></>;
 
   if (issues?.loader === "init-loader" || !issues?.groupedIssueIds) {
-    return (
-      <>
-        {activeLayout ? (
-          <ActiveLoader layout={activeLayout} />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
-          </div>
-        )}
-      </>
-    );
+    return <>{activeLayout && <ActiveLoader layout={activeLayout} />}</>;
   }
 
   return (