public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made Skeleton Loader for Availibilty Page look more like actual content of the page (#7415) 

Co-authored-by: Raunak Singh Jolly <raunak.singh@oriserve.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Efraín Rochín <roae.85@gmail.com>
chor/text-colors+weights
Raunak Singh Jolly 2023-03-04 06:38:10 +05:30 committed by GitHub
parent 47e948fbbc
commit 1551a293c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/web/components/availability/SkeletonLoader.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { SkeletonText } from "@calcom/ui";
import { Button, SkeletonText } from "@calcom/ui";
import { FiMoreHorizontal } from "@calcom/ui/components/icon";
import classNames from "@lib/classNames";
@ -18,17 +19,21 @@ export default SkeletonLoader;
function SkeletonItem() {
return (
<li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
<div className="flex-grow truncate text-sm">
<div className="flex flex-col space-y-2">
<SkeletonText className="h-4 w-32" />
<SkeletonText className="h-2 w-32" />
</div>
</div>
<div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
<SkeletonText className="h-6 w-12" />
<li>
<div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
<div className="items-between flex w-full flex-col justify-center hover:bg-neutral-50 sm:px-6">
<SkeletonText className="my-1 h-4 w-32" />
<SkeletonText className="my-1 h-2 w-24" />
<SkeletonText className="my-1 h-2 w-40" />
</div>
<Button
className="mx-5"
type="button"
variant="icon"
color="secondary"
StartIcon={FiMoreHorizontal}
disabled
/>
</div>
</li>
);