diff --git a/apps/web/components/booking/DatePicker.tsx b/apps/web/components/booking/DatePicker.tsx index f6549b1c..b558fa3e 100644 --- a/apps/web/components/booking/DatePicker.tsx +++ b/apps/web/components/booking/DatePicker.tsx @@ -181,7 +181,7 @@ function DatePicker({ // Update dates with their availability doWorkAsync({ - batch: 5, + batch: 1, name: "DatePicker", length: daysInMonth, callback: (i: number, isLast) => { @@ -201,8 +201,8 @@ function DatePicker({ date: day, }; }, - done: () => { - setDays(days); + batchDone: () => { + setDays([...days]); }, }); diff --git a/apps/web/lib/doWorkAsync.ts b/apps/web/lib/doWorkAsync.ts index c36d40b6..77ac24af 100644 --- a/apps/web/lib/doWorkAsync.ts +++ b/apps/web/lib/doWorkAsync.ts @@ -2,7 +2,7 @@ const data = {}; /** * 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 * @@ -15,24 +15,30 @@ export const doWorkAsync = ({ done, batch, offsetStart, + batchDone, __pending, }: { name: string; length: number; callback: Function; - done: Function; + done?: Function; + batchDone?: Function; batch: number; offsetStart?: number; __pending?: boolean; }) => { offsetStart = offsetStart || 0; - const stepLength = batch; const lastIndex = length - 1; const offsetEndExclusive = offsetStart + stepLength; + + batchDone = batchDone || (() => {}); + done = done || (() => {}); + if (!__pending && data[name]) { cancelAnimationFrame(data[name]); } + if (offsetStart >= length) { done(); return; @@ -42,7 +48,18 @@ export const doWorkAsync = ({ callback(i, offsetEndExclusive > lastIndex); } + batchDone(); + data[name] = requestAnimationFrame(() => { - doWorkAsync({ length, callback, name, batch, done, offsetStart: offsetEndExclusive, __pending: true }); + doWorkAsync({ + length, + callback, + batchDone, + name, + batch, + done, + offsetStart: offsetEndExclusive, + __pending: true, + }); }); };