From 91ab27e07061f95f1c0877ba2d1253dc7ac70101 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 24 Apr 2025 05:48:03 -0300
Subject: [PATCH] feat: add loading component for /apps main page (#20924)

---
 .../apps/(homepage)/loading.tsx               |   5 +
 .../apps/{ => (homepage)}/page.tsx            |   2 +-
 .../apps/(homepage)/skeleton.tsx              | 105 ++++++++++++++++++
 .../components/apps/layouts/AppsLayout.tsx    |   1 -
 4 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/app/(use-page-wrapper)/apps/(homepage)/loading.tsx
 rename apps/web/app/(use-page-wrapper)/apps/{ => (homepage)}/page.tsx (100%)
 create mode 100644 apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx

diff --git a/apps/web/app/(use-page-wrapper)/apps/(homepage)/loading.tsx b/apps/web/app/(use-page-wrapper)/apps/(homepage)/loading.tsx
new file mode 100644
index 0000000000..46bb64ba5e
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/apps/(homepage)/loading.tsx
@@ -0,0 +1,5 @@
+import { AppHomePageSkeleton } from "app/(use-page-wrapper)/apps/(homepage)/skeleton";
+
+export default function Loading() {
+  return <AppHomePageSkeleton />;
+}
diff --git a/apps/web/app/(use-page-wrapper)/apps/page.tsx b/apps/web/app/(use-page-wrapper)/apps/(homepage)/page.tsx
similarity index 100%
rename from apps/web/app/(use-page-wrapper)/apps/page.tsx
rename to apps/web/app/(use-page-wrapper)/apps/(homepage)/page.tsx
index f15da14504..336e81deb2 100644
--- a/apps/web/app/(use-page-wrapper)/apps/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/(homepage)/page.tsx
@@ -22,8 +22,8 @@ const getData = withAppDirSsr(getServerSideProps);
 
 const ServerPage = async ({ params, searchParams }: PageProps) => {
   const context = buildLegacyCtx(await headers(), await cookies(), await params, await searchParams);
-
   const props = await getData(context);
+
   return <AppsPage {...props} />;
 };
 
diff --git a/apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx b/apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx
new file mode 100644
index 0000000000..66066870fe
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SkeletonText, SkeletonContainer, SkeletonButton } from "@calcom/ui/components/skeleton";
+
+import AppsLayout from "@components/apps/layouts/AppsLayout";
+
+export function AppHomePageSkeleton() {
+  const { t } = useLocale();
+
+  return (
+    <AppsLayout
+      isPublic
+      heading={t("app_store")}
+      subtitle={t("app_store_description")}
+      headerClassName="sm:hidden lg:block hidden">
+      <SkeletonContainer>
+        <div className="flex flex-col gap-y-8">
+          {/* Featured Categories section */}
+          <div className="mb-4">
+            <div className="flex items-center justify-between">
+              <SkeletonText className="h-6 w-40 font-semibold" />
+              <div className="flex">
+                <SkeletonButton className="mx-1 h-8 w-8 rounded-md" /> {/* Left arrow */}
+                <SkeletonButton className="mx-1 h-8 w-8 rounded-md" /> {/* Right arrow */}
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
+              {/* Category cards - 5 items based on screenshot */}
+              {Array(5)
+                .fill(0)
+                .map((_, i) => (
+                  <div
+                    key={`category-${i}`}
+                    className="bg-subtle flex h-48 flex-col items-center justify-center rounded-md p-4">
+                    <div className="mb-3 h-14 w-14 rounded-full bg-gray-200" /> {/* Icon placeholder */}
+                    <SkeletonText className="h-5 w-24 text-center" /> {/* Category name */}
+                    <SkeletonText className="mt-1 h-4 w-16 text-center" /> {/* Apps count */}
+                  </div>
+                ))}
+            </div>
+          </div>
+
+          {/* Most Popular section */}
+          <div className="mb-4">
+            <div className="flex items-center justify-between">
+              <SkeletonText className="h-6 w-40 font-semibold" />
+              <div className="flex">
+                <SkeletonButton className="mx-1 h-8 w-8 rounded-md" /> {/* Left arrow */}
+                <SkeletonButton className="mx-1 h-8 w-8 rounded-md" /> {/* Right arrow */}
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+              {/* App cards - 3 items */}
+              {Array(3)
+                .fill(0)
+                .map((_, i) => (
+                  <div key={`app-${i}`} className="border-subtle flex flex-col rounded-md border p-4">
+                    <div className="flex items-center">
+                      <div className="mr-3 h-10 w-10 rounded-md bg-gray-200" /> {/* App icon */}
+                      <div className="flex-1">
+                        <SkeletonText className="h-5 w-32" /> {/* App name */}
+                        <SkeletonText className="mt-1 h-4 w-24" /> {/* Developer name */}
+                      </div>
+                    </div>
+                    <SkeletonText className="mt-3 h-4 w-full" /> {/* Description line 1 */}
+                    <SkeletonText className="mt-2 h-4 w-3/4" /> {/* Description line 2 */}
+                    <div className="mt-4 flex justify-between">
+                      <SkeletonButton className="h-9 w-24 rounded-md" /> {/* Details button */}
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+
+          {/* All apps section */}
+          <div className="mt-4">
+            <SkeletonText className="h-6 w-32 font-semibold" />
+            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+              {/* App cards - 6 items */}
+              {Array(6)
+                .fill(0)
+                .map((_, i) => (
+                  <div key={`all-app-${i}`} className="border-subtle flex flex-col rounded-md border p-4">
+                    <div className="flex items-center">
+                      <div className="mr-3 h-10 w-10 rounded-md bg-gray-200" /> {/* App icon */}
+                      <div className="flex-1">
+                        <SkeletonText className="h-5 w-32" /> {/* App name */}
+                        <SkeletonText className="mt-1 h-4 w-24" /> {/* Developer name */}
+                      </div>
+                    </div>
+                    <SkeletonText className="mt-3 h-4 w-full" /> {/* Description line 1 */}
+                    <SkeletonText className="mt-2 h-4 w-3/4" /> {/* Description line 2 */}
+                    <div className="mt-4 flex justify-between">
+                      <SkeletonButton className="h-9 w-24 rounded-md" /> {/* Details button */}
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        </div>
+      </SkeletonContainer>
+    </AppsLayout>
+  );
+}
diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
index d7e95db8ec..bdfd58219a 100644
--- a/apps/web/components/apps/layouts/AppsLayout.tsx
+++ b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -19,7 +19,6 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
   const router = useRouter();
   const isAdmin = session.data?.user.role === "ADMIN";
 
-  if (session.status === "loading") return <></>;
   return (
     <Shell {...rest} actions={actions?.("block")}>
       <div className="flex flex-col xl:flex-row">