mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

[Bugfix] Booking Date Picker - First few dates are rendered fast, but later dates are all rendered in UI at once. (#1989)

Browse source
This commit is contained in:
hariombalhara 2022-02-28 14:46:43 +05:30 committed by GitHub
parent 8717d96d0a
commit cc90cf0b72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/web/components/booking/DatePicker.tsx
View file

@ -181,7 +181,7 @@ function DatePicker({
// Update dates with their availability // Update dates with their availability
doWorkAsync({ doWorkAsync({
batch: 5, batch: 1,
name: "DatePicker", name: "DatePicker",
length: daysInMonth, length: daysInMonth,
callback: (i: number, isLast) => { callback: (i: number, isLast) => {
@ -201,8 +201,8 @@ function DatePicker({
date: day, date: day,
}; };
}, },
done: () => { batchDone: () => {
setDays(days); setDays([...days]);
}, },
}); });

25
apps/web/lib/doWorkAsync.ts
View file

@ -2,7 +2,7 @@ const data = {};
/** /**
* Starts an iteration from `0` to `length - 1` with batch size `batch` * Starts an iteration from `0` to `length - 1` with batch size `batch`
* *
* `callback` is called per iteration * `callback` is called per iteration
* *
* `done` is called when all iterations are done * `done` is called when all iterations are done
* *
@ -15,24 +15,30 @@ export const doWorkAsync = ({
done, done,
batch, batch,
offsetStart, offsetStart,
batchDone,
__pending, __pending,
}: { }: {
name: string; name: string;
length: number; length: number;
callback: Function; callback: Function;
done: Function; done?: Function;
batchDone?: Function;
batch: number; batch: number;
offsetStart?: number; offsetStart?: number;
__pending?: boolean; __pending?: boolean;
}) => { }) => {
offsetStart = offsetStart || 0; offsetStart = offsetStart || 0;
const stepLength = batch; const stepLength = batch;
const lastIndex = length - 1; const lastIndex = length - 1;
const offsetEndExclusive = offsetStart + stepLength; const offsetEndExclusive = offsetStart + stepLength;
batchDone = batchDone || (() => {});
done = done || (() => {});
if (!__pending && data[name]) { if (!__pending && data[name]) {
cancelAnimationFrame(data[name]); cancelAnimationFrame(data[name]);
} }
if (offsetStart >= length) { if (offsetStart >= length) {
done(); done();
return; return;
@ -42,7 +48,18 @@ export const doWorkAsync = ({
callback(i, offsetEndExclusive > lastIndex); callback(i, offsetEndExclusive > lastIndex);
} }
batchDone();
data[name] = requestAnimationFrame(() => { data[name] = requestAnimationFrame(() => {
doWorkAsync({ length, callback, name, batch, done, offsetStart: offsetEndExclusive, __pending: true }); doWorkAsync({
length,
callback,
batchDone,
name,
batch,
done,
offsetStart: offsetEndExclusive,
__pending: true,
});
}); });
}; };