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

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]);
       },
     });
 

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,
+    });
   });
 };