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

adds availability select loader (#2718)

pull/2674/head^2
Syed Ali Shahbaz 2022-05-11 10:56:06 +05:30 committed by GitHub
parent 65a69ef1e4
commit 746643bf8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,3 +31,16 @@ function SkeletonItem() {
</li> </li>
); );
} }
export const AvailabilitySelectSkeletonLoader = () => {
return (
<li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
<div className="flex-grow truncate text-sm">
<div className="flex justify-between">
<SkeletonText width="32" height="4"></SkeletonText>
<SkeletonText width="4" height="4"></SkeletonText>
</div>
</div>
</li>
);
};

2
apps/web/pages/event-types/[type].tsx
View File

@ -60,6 +60,7 @@ import { EmbedButton, EmbedDialog } from "@components/Embed";
import Loader from "@components/Loader"; import Loader from "@components/Loader";
import Shell from "@components/Shell"; import Shell from "@components/Shell";
import { UpgradeToProDialog } from "@components/UpgradeToProDialog"; import { UpgradeToProDialog } from "@components/UpgradeToProDialog";
import { AvailabilitySelectSkeletonLoader } from "@components/availability/SkeletonLoader";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import RecurringEventController from "@components/eventtype/RecurringEventController"; import RecurringEventController from "@components/eventtype/RecurringEventController";
import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm"; import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm";
@ -164,6 +165,7 @@ const AvailabilitySelect = ({
return ( return (
<QueryCell <QueryCell
query={query} query={query}
customLoader={<AvailabilitySelectSkeletonLoader />}
success={({ data }) => { success={({ data }) => {
const options = data.schedules.map((schedule) => ({ const options = data.schedules.map((schedule) => ({
value: schedule.id, value: schedule.id,