From a03e64da1b1d68c38827873e7389b9cf8f615ae9 Mon Sep 17 00:00:00 2001
From: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>
Date: Mon, 12 Jan 2026 08:42:46 +0530
Subject: [PATCH] feat: implemented skeleton loader (#23654)

* implemented skeleton loader

* fix: improve skeleton ui

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../settings/platform/platform-view.tsx       | 54 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/apps/web/modules/settings/platform/platform-view.tsx b/apps/web/modules/settings/platform/platform-view.tsx
index 684b861100..23d82bb919 100644
--- a/apps/web/modules/settings/platform/platform-view.tsx
+++ b/apps/web/modules/settings/platform/platform-view.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { useState, useEffect, useCallback } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";
 
 import { useExternalRedirectHandler } from "@lib/hooks/settings/platform/billing/useExternalRedirectHandler";
@@ -21,6 +22,55 @@ import Shell from "~/shell/Shell";
 
 const queryClient = new QueryClient();
 
+const PlatformSkeletonLoader = () => (
+  <Shell
+    isPlatformUser={true}
+    withoutMain={false}
+    SidebarContainer={<></>}
+    heading={<SkeletonText className="h-6 w-36" />}
+    subtitle={<SkeletonText className="mt-1 h-4 w-64" />}
+    title={undefined}
+    description={undefined}>
+    <div className="mb-10">
+      <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
+        <div className="flex w-full flex-col gap-1">
+          <SkeletonText className="h-5 w-40" />
+          <SkeletonText className="h-4 w-56" />
+        </div>
+        <div className="mt-4 sm:mt-0">
+          <div className="bg-emphasis h-9 w-20 animate-pulse rounded-md" />
+        </div>
+      </div>
+      <div className="border-subtle divide-subtle divide-y rounded-b-lg border border-t-0">
+        {[0, 1].map((i) => (
+          <div key={i} className="flex w-full justify-between px-4 py-4 sm:px-6">
+            <div className="flex min-w-0 flex-1 flex-col gap-2">
+              <div className="flex gap-2">
+                <SkeletonText className="h-4 w-28" />
+                <SkeletonText className="h-4 w-48" />
+              </div>
+              <div className="flex gap-2">
+                <SkeletonText className="h-4 w-24" />
+                <SkeletonText className="h-4 w-40" />
+              </div>
+              <div className="flex gap-2">
+                <SkeletonText className="h-4 w-28" />
+                <SkeletonText className="h-4 w-28" />
+                <SkeletonText className="h-4 w-20" />
+              </div>
+            </div>
+            <div className="ml-4 flex shrink-0 items-start gap-3">
+              <div className="bg-emphasis h-8 w-20 animate-pulse rounded-md" />
+              <div className="bg-emphasis h-8 w-16 animate-pulse rounded-md" />
+              <div className="bg-emphasis h-8 w-16 animate-pulse rounded-md" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </Shell>
+);
+
 export default function Platform() {
   const { t } = useLocale();
   const [_initialClientId, setInitialClientId] = useState("");
@@ -69,10 +119,10 @@ export default function Platform() {
     refetchBillingState();
   });
 
-  if (isUserLoading || isOAuthClientLoading) return <div className="m-5">{t("loading")}</div>;
+  if (isUserLoading || isOAuthClientLoading) return <PlatformSkeletonLoader />;
 
   if (isUserBillingDataLoading && !userBillingData) {
-    return <div className="m-5">{t("loading")}</div>;
+    return <PlatformSkeletonLoader />;
   }
 
   if (isPlatformUser && !isPaidUser)