From 73c640f85d8197675e94e2ed35313a43fce4f70f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 28 May 2024 17:10:32 +0530
Subject: [PATCH] chore: workspace active cycle loader added (#315)

---
 web/components/active-cycles/list-page.tsx    | 13 ++----
 web/components/ui/loader/index.ts             |  1 +
 .../ui/loader/workspace-active-cycle.tsx      | 40 +++++++++++++++++++
 .../workspace-active-cycles-list.tsx          |  2 +-
 4 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 web/components/ui/loader/workspace-active-cycle.tsx

diff --git a/web/components/active-cycles/list-page.tsx b/web/components/active-cycles/list-page.tsx
index ff2bb01865..3e5bd52dcf 100644
--- a/web/components/active-cycles/list-page.tsx
+++ b/web/components/active-cycles/list-page.tsx
@@ -1,9 +1,8 @@
 import { FC, useEffect } from "react";
 import useSWR from "swr";
-// ui
-import { Spinner } from "@plane/ui";
 // components
 import { ActiveCycleInfoCard } from "@/components/active-cycles";
+import { WorkspaceActiveCycleLoader } from "@/components/ui";
 // constants
 import { WORKSPACE_ACTIVE_CYCLES_LIST } from "@/constants/fetch-keys";
 // services
@@ -22,7 +21,7 @@ export const ActiveCyclesListPage: FC<ActiveCyclesListPageProps> = (props) => {
   const { workspaceSlug, cursor, perPage, updateTotalPages, updateResultsCount } = props;
 
   // fetching active cycles in workspace
-  const { data: workspaceActiveCycles } = useSWR(
+  const { data: workspaceActiveCycles, isLoading } = useSWR(
     workspaceSlug && cursor ? WORKSPACE_ACTIVE_CYCLES_LIST(workspaceSlug as string, cursor, `${perPage}`) : null,
     workspaceSlug && cursor ? () => cycleService.workspaceActiveCycles(workspaceSlug.toString(), cursor, perPage) : null
   );
@@ -34,12 +33,8 @@ export const ActiveCyclesListPage: FC<ActiveCyclesListPageProps> = (props) => {
     }
   }, [updateTotalPages, updateResultsCount, workspaceActiveCycles]);
 
-  if (!workspaceActiveCycles) {
-    return (
-      <div className="flex items-center justify-center h-full w-full">
-        <Spinner />
-      </div>
-    );
+  if (!workspaceActiveCycles || isLoading) {
+    return <WorkspaceActiveCycleLoader />;
   }
 
   return (
diff --git a/web/components/ui/loader/index.ts b/web/components/ui/loader/index.ts
index c36666583f..f052f186c9 100644
--- a/web/components/ui/loader/index.ts
+++ b/web/components/ui/loader/index.ts
@@ -7,3 +7,4 @@ export * from "./cycle-module-list-loader";
 export * from "./view-list-loader";
 export * from "./projects-loader";
 export * from "./utils";
+export * from "./workspace-active-cycle";
diff --git a/web/components/ui/loader/workspace-active-cycle.tsx b/web/components/ui/loader/workspace-active-cycle.tsx
new file mode 100644
index 0000000000..4f889c5a2a
--- /dev/null
+++ b/web/components/ui/loader/workspace-active-cycle.tsx
@@ -0,0 +1,40 @@
+import React, { FC } from "react";
+
+type Props = {
+  itemCount?: number;
+};
+
+const WorkspaceActiveCycleLoaderItem = () => (
+  <div className="px-5 pt-5 last:pb-5">
+    <div className="flex flex-col gap-4 p-4 rounded-xl border border-custom-border-200 bg-custom-background-100">
+      <div className="flex items-center gap-1.5">
+        <span className="size-7 bg-custom-background-80 rounded" />
+        <span className="h-7 w-20 bg-custom-background-80 rounded" />
+      </div>
+      <div className="flex items-center justify-between px-3 py-2 rounded border-[0.5px] border-custom-border-100 bg-custom-background-90">
+        <div className="flex items-center gap-2 cursor-default">
+          <span className="size-6 bg-custom-background-80 rounded" />
+          <span className="h-6 w-14 bg-custom-background-80 rounded" />
+          <span className="h-6 w-16 bg-custom-background-80 rounded" />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="h-6 w-16 bg-custom-background-80 rounded" />
+          <span className="h-6 w-20 bg-custom-background-80 rounded" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+        <span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
+        <span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
+        <span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
+      </div>
+    </div>
+  </div>
+);
+
+export const WorkspaceActiveCycleLoader: FC<Props> = ({ itemCount = 2 }) => (
+  <div className="h-full w-full overflow-y-scroll bg-custom-background-90 vertical-scrollbar scrollbar-md animate-pulse">
+    {[...Array(itemCount)].map((_, index) => (
+      <WorkspaceActiveCycleLoaderItem key={index} />
+    ))}
+  </div>
+);
diff --git a/web/components/workspace/workspace-active-cycles-list.tsx b/web/components/workspace/workspace-active-cycles-list.tsx
index b298d97dec..2f6535d652 100644
--- a/web/components/workspace/workspace-active-cycles-list.tsx
+++ b/web/components/workspace/workspace-active-cycles-list.tsx
@@ -12,7 +12,7 @@ export const WorkspaceActiveCyclesList = observer(() => {
   // state
   const [pageCount, setPageCount] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
-  const [resultsCount, setResultsCount] = useState(0); // workspaceActiveCycles.results.length
+  const [resultsCount, setResultsCount] = useState<number | null>(null); // workspaceActiveCycles.results.length
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;