Eunjae LeeandGitHub
dd7f108f08
* Revert "fix: revert bookings redesign (#25172)"
This reverts commit 1f102bf3b4.
* add bookings-v3 feature flag
* put things behind a feature flag
* remove no longer needed test
* revert e2e tests
* put back description
* revert AvatarGroup
* apply feedback
* remove "view" booking action
* remove Alert (When the bookings query errors, this branch now renders only the alert and skips the data-table filter/segment controls. Those controls moved into BookingsList, so in error states users can no longer clear or tweak filters to recover from the failure, effectively trapping them behind the alert.)
* address feedback
* revert useMediaQuery
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import React from "react";
|
|
|
|
import { SkeletonText } from "@calcom/ui/components/skeleton";
|
|
|
|
function SkeletonLoader() {
|
|
return (
|
|
<ul className="divide-subtle border-subtle bg-default animate-pulse divide-y rounded-md border sm:overflow-hidden">
|
|
{/* TODAY header */}
|
|
<li className="bg-muted flex items-center px-6 py-4">
|
|
<SkeletonText className="h-4 w-16" />
|
|
</li>
|
|
<SkeletonItem />
|
|
<SkeletonItem />
|
|
<SkeletonItem />
|
|
|
|
{/* NEXT header */}
|
|
<li className="bg-muted px-4 py-2">
|
|
<SkeletonText className="h-4 w-16" />
|
|
</li>
|
|
<SkeletonItem />
|
|
<SkeletonItem />
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default SkeletonLoader;
|
|
|
|
function SkeletonItem() {
|
|
return (
|
|
<li className="group flex w-full items-start justify-between px-4 py-4 sm:px-6">
|
|
{/* Left side - Date and time info */}
|
|
<div className="flex min-w-0 flex-shrink-0 flex-col gap-2 pr-4">
|
|
<SkeletonText className="h-4 w-24" />
|
|
<SkeletonText className="h-4 w-28" />
|
|
<div className="mt-1 flex items-center gap-2">
|
|
<SkeletonText className="h-4 w-4 rounded" />
|
|
<SkeletonText className="h-3 w-20" />
|
|
</div>
|
|
{/* Badges */}
|
|
<div className="mt-3 flex gap-2">
|
|
<SkeletonText className="h-5 w-14 rounded-md" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right side - Event details */}
|
|
<div className="flex min-w-0 flex-1 flex-col space-y-2">
|
|
{/* Event title */}
|
|
<SkeletonText className="h-5 w-36" />
|
|
{/* Event description */}
|
|
<SkeletonText className="h-4 w-48" />
|
|
{/* Attendees */}
|
|
<SkeletonText className="h-4 w-56" />
|
|
</div>
|
|
|
|
{/* Action buttons - only visible on larger screens */}
|
|
<div className="ml-4 hidden flex-shrink-0 gap-2 sm:flex">
|
|
<SkeletonText className="h-9 w-20 rounded-md" />
|
|
<SkeletonText className="h-9 w-20 rounded-md" />
|
|
<SkeletonText className="h-9 w-9 rounded-md" />
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="ml-4 flex flex-shrink-0 sm:hidden">
|
|
<SkeletonText className="h-9 w-9 rounded-md" />
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|