commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

feat: implemented skeleton loader (#23654)

Browse Source 
* 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>
This commit is contained in:
Pallav
2026-01-12 08:42:46 +05:30
committed by GitHub
co-authored by Kartik Saini Devin AI
parent 2e571eaedf
commit a03e64da1b
1 changed files with 52 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/settings/platform/platform-view.tsx
+52 -2
View File
@@ -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)