From 27372d624db5d211a70f396c45e033be494378ad Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Fri, 30 Sep 2022 20:39:23 +0200
Subject: [PATCH] add skeleton loader for workflows in event type settings
 (#4774)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/v2/EventWorkflowsTab.tsx       |  5 ++-
 .../v2/SkeletonLoaderEventWorkflowsTab.tsx    | 38 +++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 packages/features/ee/workflows/components/v2/SkeletonLoaderEventWorkflowsTab.tsx

diff --git a/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
index e0cb1ccfcc..a82b6245ad 100644
--- a/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx
@@ -8,11 +8,12 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import { Button, Loader, showToast, Switch, Tooltip } from "@calcom/ui/v2";
+import { Button, showToast, Switch, Tooltip } from "@calcom/ui/v2";
 
 import LicenseRequired from "../../../common/components/v2/LicenseRequired";
 import { getActionIcon } from "../../lib/getActionIcon";
 import EmptyScreen from "./EmptyScreen";
+import SkeletonLoader from "./SkeletonLoaderEventWorkflowsTab";
 import { WorkflowType } from "./WorkflowListPage";
 
 type ItemProps = {
@@ -213,7 +214,7 @@ function EventWorkflowsTab(props: Props) {
           />
         )
       ) : (
-        <Loader />
+        <SkeletonLoader />
       )}
     </LicenseRequired>
   );
diff --git a/packages/features/ee/workflows/components/v2/SkeletonLoaderEventWorkflowsTab.tsx b/packages/features/ee/workflows/components/v2/SkeletonLoaderEventWorkflowsTab.tsx
new file mode 100644
index 0000000000..4fcb23a789
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/SkeletonLoaderEventWorkflowsTab.tsx
@@ -0,0 +1,38 @@
+import { Icon } from "@calcom/ui";
+import { SkeletonAvatar, SkeletonText } from "@calcom/ui/v2";
+
+function SkeletonLoader() {
+  return (
+    <ul className="mt-4 animate-pulse divide-neutral-200 bg-white sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group mb-4 flex h-[90px] w-full items-center justify-between rounded-md border border-gray-200 px-4 py-4 sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex">
+          <SkeletonAvatar className="h-10 w-10" />
+
+          <div className="mt-1 ml-4 flex flex-col space-y-1">
+            <SkeletonText className="h-5 w-20 sm:w-24" />
+            <div className="flex">
+              <SkeletonText className="mr-2 h-4 w-16 sm:w-28" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-0 flex flex-shrink-0 sm:ml-5">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText className="h-8 w-8 sm:w-16" />
+          <SkeletonText className="h-8 w-8 sm:w-16" />
+        </div>
+      </div>
+    </li>
+  );
+}