Files
calendar/apps/web/modules/ee/common/components/CommonSkeletonLoaders.tsx
T
Benny JooGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
b3430c8efc refactor: remove 10 trpc imports from features package by moving 16 tRPC-driven components to apps/web/modules (#27336)
* refactor: move Segment, BookerLayoutSelector, CreateLicenseKeyForm from packages/features to apps/web/modules

Co-Authored-By: benny@cal.com <sldisek783@gmail.com>

* fix: update relative imports to absolute paths in moved files

Co-Authored-By: benny@cal.com <sldisek783@gmail.com>

* refactor: move useBookingLocation and blocklist components from packages/features to apps/web/modules

Co-Authored-By: benny@cal.com <sldisek783@gmail.com>

* refactor: move EmbedTabs and embed hooks from packages/features to apps/web/modules

Co-Authored-By: benny@cal.com <sldisek783@gmail.com>

* fix

* migrate useBookerUrl

* migrate embed tabs

* fix

* fix

* fix

* mv ThemeLabel

* mv settings headers to webn

* update imports

* clean up

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-01-30 04:55:50 -03:00

31 lines
1.3 KiB
TypeScript

import SectionBottomActions from "@calcom/web/modules/settings/components/SectionBottomActions";
import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
export const AppearanceSkeletonLoader = () => {
return (
<SkeletonContainer>
<div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">
<SkeletonText className="h-8 w-1/3" />
</div>
<div className="border-subtle stack-y-6 border-x px-4 py-6 sm:px-6">
<div className="flex w-full items-center justify-center gap-6">
<div className="bg-emphasis h-32 flex-1 animate-pulse rounded-md p-5" />
<div className="bg-emphasis h-32 flex-1 animate-pulse rounded-md p-5" />
<div className="bg-emphasis h-32 flex-1 animate-pulse rounded-md p-5" />
</div>
<div className="flex justify-between">
<SkeletonText className="h-8 w-1/3" />
<SkeletonText className="h-8 w-1/3" />
</div>
<SkeletonText className="h-8 w-full" />
</div>
<div className="rounded-b-xl">
<SectionBottomActions align="end">
<SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
</SectionBottomActions>
</div>
</SkeletonContainer>
);
};