From 2fbaec41c96c45c7d48976967baee6df961afc66 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Wed, 14 Sep 2022 06:35:40 -0400
Subject: [PATCH] Refactor skeleton loader files to v2 folders (#4447)

* create v2 skeleton loaders

* add depreciation notice to old skeleton loader files

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../availability/SkeletonLoader.tsx           |  1 +
 .../web/components/booking/SkeletonLoader.tsx |  1 +
 .../components/eventtype/SkeletonLoader.tsx   |  1 +
 .../v2/availability/SkeletonLoader.tsx        | 46 ++++++++++++++++++
 .../components/v2/bookings/SkeletonLoader.tsx | 36 ++++++++++++++
 .../v2/eventtype/AvailabilityTab.tsx          |  4 +-
 .../v2/eventtype/SkeletonLoader.tsx           | 47 +++++++++++++++++++
 apps/web/pages/event-types/index.tsx          |  2 +-
 apps/web/pages/v2/availability/index.tsx      |  2 +-
 apps/web/pages/v2/bookings/[status].tsx       |  4 +-
 apps/web/pages/v2/event-types/index.tsx       |  2 +-
 .../pages/v2/settings/developer/api-keys.tsx  |  2 +-
 packages/ui/apps/SkeletonLoader.tsx           |  3 +-
 packages/ui/v2/core/apps/SkeletonLoader.tsx   | 38 +++++++++++++++
 14 files changed, 179 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/components/v2/availability/SkeletonLoader.tsx
 create mode 100644 apps/web/components/v2/bookings/SkeletonLoader.tsx
 create mode 100644 apps/web/components/v2/eventtype/SkeletonLoader.tsx
 create mode 100644 packages/ui/v2/core/apps/SkeletonLoader.tsx

diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index f4816aa2b3..c0fe6da745 100644
--- a/apps/web/components/availability/SkeletonLoader.tsx
+++ b/apps/web/components/availability/SkeletonLoader.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { SkeletonText } from "@calcom/ui";
 
+/** @deprecated Use `apps/web/components/v2/availability/SkeletonLoader.tsx` */
 function SkeletonLoader() {
   return (
     <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index 49a346eb88..354e8777c8 100644
--- a/apps/web/components/booking/SkeletonLoader.tsx
+++ b/apps/web/components/booking/SkeletonLoader.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { SkeletonText } from "@calcom/ui";
 
+/** @deprecated Use `apps/web/components/v2/bookings/SkeletonLoader.tsx` */
 function SkeletonLoader() {
   return (
     <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 9e52d7f420..6dcfcf23d8 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -1,6 +1,7 @@
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";
 
+/** @deprecated Use `apps/web/components/v2/eventtype/SkeletonLoader.tsx` */
 function SkeletonLoader() {
   return (
     <SkeletonContainer>
diff --git a/apps/web/components/v2/availability/SkeletonLoader.tsx b/apps/web/components/v2/availability/SkeletonLoader.tsx
new file mode 100644
index 0000000000..56222412f6
--- /dev/null
+++ b/apps/web/components/v2/availability/SkeletonLoader.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+import { SkeletonText } from "@calcom/ui/v2";
+
+function SkeletonLoader() {
+  return (
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex flex-col space-y-2">
+          <SkeletonText className="h-4 w-32" />
+          <SkeletonText className="h-2 w-32" />
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText className="h-6 w-12" />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export const AvailabilitySelectSkeletonLoader = () => {
+  return (
+    <li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-between">
+          <SkeletonText className="h-4 w-32" />
+          <SkeletonText className="h-4 w-4" />
+        </div>
+      </div>
+    </li>
+  );
+};
diff --git a/apps/web/components/v2/bookings/SkeletonLoader.tsx b/apps/web/components/v2/bookings/SkeletonLoader.tsx
new file mode 100644
index 0000000000..e9cb916267
--- /dev/null
+++ b/apps/web/components/v2/bookings/SkeletonLoader.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { SkeletonText } from "@calcom/ui/v2";
+
+function SkeletonLoader() {
+  return (
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex">
+          <div className="flex flex-col space-y-2">
+            <SkeletonText className="h-5 w-16" />
+            <SkeletonText className="h-4 w-32" />
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText className="h-6 w-16" />
+          <SkeletonText className="h-6 w-32" />
+        </div>
+      </div>
+    </li>
+  );
+}
diff --git a/apps/web/components/v2/eventtype/AvailabilityTab.tsx b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
index 2e4bedb3a6..338610b009 100644
--- a/apps/web/components/v2/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
@@ -11,7 +11,7 @@ import Button from "@calcom/ui/v2/core/Button";
 import Select from "@calcom/ui/v2/core/form/Select";
 import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
 
-import { AvailabilitySelectSkeletonLoader } from "@components/availability/SkeletonLoader";
+import { AvailabilitySelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader";
 
 type AvailabilityOption = {
   label: string;
@@ -117,7 +117,7 @@ export const AvailabilityTab = () => {
                     ))}
                   </div>
                 ) : (
-                  <span className=" text-gray-500 opacity-50">{t("unavailable")}</span>
+                  <span className="text-gray-500 opacity-50 ">{t("unavailable")}</span>
                 )}
               </li>
             );
diff --git a/apps/web/components/v2/eventtype/SkeletonLoader.tsx b/apps/web/components/v2/eventtype/SkeletonLoader.tsx
new file mode 100644
index 0000000000..a63ffb34cf
--- /dev/null
+++ b/apps/web/components/v2/eventtype/SkeletonLoader.tsx
@@ -0,0 +1,47 @@
+import { Icon } from "@calcom/ui/Icon";
+import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
+
+function SkeletonLoader() {
+  return (
+    <SkeletonContainer>
+      <div className="mb-4 flex items-center">
+        <SkeletonAvatar className="h-8 w-8" />
+        <div className="space-y-1">
+          <SkeletonText className="h-4 w-16" />
+          <SkeletonText className="h-4 w-24" />
+        </div>
+      </div>
+      <ul className="divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </SkeletonContainer>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div>
+          <SkeletonText className="h-5 w-32" />
+        </div>
+        <div className="">
+          <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
+            <li className="flex items-center whitespace-nowrap">
+              <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <SkeletonText className="h-4 w-12" />
+            </li>
+            <li className="flex items-center whitespace-nowrap">
+              <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <SkeletonText className="h-4 w-16" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </li>
+  );
+}
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 691aac6740..d2688c1582 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -36,11 +36,11 @@ import { HttpError } from "@lib/core/http/error";
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 import CreateEventTypeButton from "@components/eventtype/CreateEventType";
 import EventTypeDescription from "@components/eventtype/EventTypeDescription";
-import SkeletonLoader from "@components/eventtype/SkeletonLoader";
 import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import { LinkText } from "@components/ui/LinkText";
 import NoCalendarConnectedAlert from "@components/ui/NoCalendarConnectedAlert";
+import SkeletonLoader from "@components/v2/eventtype/SkeletonLoader";
 
 import { TRPCClientError } from "@trpc/react";
 
diff --git a/apps/web/pages/v2/availability/index.tsx b/apps/web/pages/v2/availability/index.tsx
index 280eec5ad1..86450503ab 100644
--- a/apps/web/pages/v2/availability/index.tsx
+++ b/apps/web/pages/v2/availability/index.tsx
@@ -11,7 +11,7 @@ import { EmptyScreen, showToast } from "@calcom/ui/v2";
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
 
-import SkeletonLoader from "@components/availability/SkeletonLoader";
+import SkeletonLoader from "@components/v2/availability/SkeletonLoader";
 
 export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) {
   const { t } = useLocale();
diff --git a/apps/web/pages/v2/bookings/[status].tsx b/apps/web/pages/v2/bookings/[status].tsx
index 47a80d63d1..fab59be7ed 100644
--- a/apps/web/pages/v2/bookings/[status].tsx
+++ b/apps/web/pages/v2/bookings/[status].tsx
@@ -15,7 +15,7 @@ import BookingLayout from "@calcom/ui/v2/core/layouts/BookingLayout";
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
 import BookingListItem from "@components/booking/BookingListItem";
-import SkeletonLoader from "@components/booking/SkeletonLoader";
+import SkeletonLoader from "@components/v2/bookings/SkeletonLoader";
 
 type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
 type BookingOutput = inferQueryOutput<"viewer.bookings">["bookings"][0];
@@ -98,7 +98,7 @@ export default function Bookings() {
           <div className="pt-2 xl:pt-0">
             <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
             {/* TODO: add today only for the current day
-            <p className="pb-3 text-xs font-medium uppercase leading-4 text-gray-500">{t("today")}</p>
+            <p className="pb-3 text-xs font-medium leading-4 text-gray-500 uppercase">{t("today")}</p>
              */}
 
             <div className="overflow-hidden rounded-md border border-gray-200">
diff --git a/apps/web/pages/v2/event-types/index.tsx b/apps/web/pages/v2/event-types/index.tsx
index ed8d3fe308..8078f91207 100644
--- a/apps/web/pages/v2/event-types/index.tsx
+++ b/apps/web/pages/v2/event-types/index.tsx
@@ -28,9 +28,9 @@ import { HttpError } from "@lib/core/http/error";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 import EventTypeDescription from "@components/eventtype/EventTypeDescription";
-import SkeletonLoader from "@components/eventtype/SkeletonLoader";
 import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
+import SkeletonLoader from "@components/v2/eventtype/SkeletonLoader";
 
 import { TRPCClientError } from "@trpc/react";
 
diff --git a/apps/web/pages/v2/settings/developer/api-keys.tsx b/apps/web/pages/v2/settings/developer/api-keys.tsx
index a128acb0dc..f10449b9b1 100644
--- a/apps/web/pages/v2/settings/developer/api-keys.tsx
+++ b/apps/web/pages/v2/settings/developer/api-keys.tsx
@@ -7,10 +7,10 @@ import ApiKeyListItem from "@calcom/features/ee/api-keys/components/v2/ApiKeyLis
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
 import { EmptyScreen, Button } from "@calcom/ui/v2";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
 import Meta from "@calcom/ui/v2/core/Meta";
+import SkeletonLoader from "@calcom/ui/v2/core/apps/SkeletonLoader";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
 const ApiKeysView = () => {
diff --git a/packages/ui/apps/SkeletonLoader.tsx b/packages/ui/apps/SkeletonLoader.tsx
index 9bf07aabce..cc32b02b6b 100644
--- a/packages/ui/apps/SkeletonLoader.tsx
+++ b/packages/ui/apps/SkeletonLoader.tsx
@@ -1,8 +1,7 @@
-import React from "react";
-
 import { SkeletonText } from "../";
 import { ShellSubHeading } from "../Shell";
 
+/** @deprecated Use `packages/ui/v2/core/apps/SkeletonLoader.tsx` */
 function SkeletonLoader({ className }: { className?: string }) {
   return (
     <>
diff --git a/packages/ui/v2/core/apps/SkeletonLoader.tsx b/packages/ui/v2/core/apps/SkeletonLoader.tsx
new file mode 100644
index 0000000000..66ce4ec9ab
--- /dev/null
+++ b/packages/ui/v2/core/apps/SkeletonLoader.tsx
@@ -0,0 +1,38 @@
+import { ShellSubHeading } from "../Shell";
+import { SkeletonText } from "../skeleton";
+
+function SkeletonLoader({ className }: { className?: string }) {
+  return (
+    <>
+      <ShellSubHeading title={<div className="h-6 w-32 bg-gray-100" />} {...{ className }} />
+      <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between p-3">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-start space-x-2">
+          <SkeletonText className="h-10 w-10" />
+          <div className="space-y-2">
+            <SkeletonText className="h-4 w-32" />
+            <SkeletonText className="h-4 w-16" />
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText className="h-11 w-32" />
+        </div>
+      </div>
+    </li>
+  );
+}