Remove <Loader/> from app setup pages and team user availability view (#4931)

* remove loader from setup screens + zapier loading

* remove loader from team user availability

* create skeleton loader

* code clean up

* code clean up

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/pages/v2/apps/[slug]/setup.tsx

@@ -4,7 +4,6 @@ import { useRouter } from "next/router";
 
 import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
 import { AppSetupPage } from "@calcom/app-store/_pages/v2/setup";
-import Loader from "@calcom/ui/Loader";
 
 export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter();
@@ -12,11 +11,7 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
   const { status } = useSession();
 
   if (status === "loading") {
-    return (
-      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
-        <Loader />
-      </div>
-    );
+    return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
   }
 
   if (status === "unauthenticated") {

apps/web/public/static/locales/en/common.json

@@ -1299,5 +1299,7 @@
   "dont_update": "Don't update",
   "email_address_action": "send email to a specific email address",
   "after_event_trigger": "after event ends",
-  "how_long_after": "How long after event ends?"
+  "how_long_after": "How long after event ends?",
+  "no_available_slots": "No Available slots",
+  "time_available": "Time available"
 }

packages/app-store/zapier/pages/v2/setup/index.tsx

@@ -41,11 +41,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
   }
 
   if (integrations.isLoading) {
-    return (
-      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
-        <Loader />
-      </div>
-    );
+    return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
   }
 
   return (

packages/features/ee/teams/components/v2/SkeletonLoaderAvailabilityTimes.tsx

@@ -0,0 +1,15 @@
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
+
+function SkeletonLoader() {
+  return (
+    <SkeletonContainer>
+      <div className="mr-3">
+        <SkeletonText className="h-4 w-28" />
+        <SkeletonText className="mt-3 h-11 w-full" />
+        <SkeletonText className="mt-2 h-11 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+}
+
+export default SkeletonLoader;

packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx

@@ -3,9 +3,11 @@ import React from "react";
 import { ITimezone } from "react-timezone-select";
 
 import { Dayjs } from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import getSlots from "@calcom/lib/slots";
 import { trpc } from "@calcom/trpc/react";
-import { Loader } from "@calcom/ui/v2";
+
+import SkeletonLoader from "./SkeletonLoaderAvailabilityTimes";
 
 interface Props {
   teamId: number;
@@ -18,6 +20,8 @@ interface Props {
 }
 
 export default function TeamAvailabilityTimes(props: Props) {
+  const { t } = useLocale();
+
   const { data, isLoading } = trpc.useQuery(
     [
       "viewer.teams.getMemberAvailability",
@@ -47,13 +51,13 @@ export default function TeamAvailabilityTimes(props: Props) {
   return (
     <div className={classNames("min-w-60 flex-grow pl-0", props.className)}>
       {props.HeaderComponent}
-      {isLoading && times.length === 0 && <Loader />}
+      {isLoading && times.length === 0 && <SkeletonLoader />}
       {!isLoading && times.length === 0 ? (
         <div className="flex flex-col items-center justify-center pt-4">
-          <span className="text-sm text-gray-500">No Available slots</span>
+          <span className="text-sm text-gray-500">{t("no_available_slots")}</span>
         </div>
       ) : (
-        <>{!isLoading && <p className="mb-3 text-sm text-gray-600">Time available</p>}</>
+        <>{!isLoading && <p className="mb-3 text-sm text-gray-600">{t("time_available")}</p>}</>
       )}
       <div className="max-h-[390px] overflow-scroll">
         {times.map((time) => (

packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx

@@ -1,5 +1,4 @@
-import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (