feat: add infinite scroll on bookings tabs (#1059)

* feat: add infinite scroll on bookings tabs

* bookings page infinite scroll PR comments (#1060)

* check if `InteractionObserver` is supported

* revert query cell and use bespoke behaviour

* Update pages/bookings/[status].tsx

Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com>

* load more button

* make inview as a callback

Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com>

* mt-6

* fix: translation strings and remove unnecessary stuff

Co-authored-by: Alex Johansson <alexander@n1s.se>

lib/hooks/useInViewObserver.ts

@@ -0,0 +1,42 @@
+import React from "react";
+
+const isInteractionObserverSupported = typeof window !== "undefined" && "IntersectionObserver" in window;
+
+export const useInViewObserver = (onInViewCallback: () => void) => {
+  const [node, setRef] = React.useState<any>(null);
+
+  const onInViewCallbackRef = React.useRef(onInViewCallback);
+  onInViewCallbackRef.current = onInViewCallback;
+
+  React.useEffect(() => {
+    if (!isInteractionObserverSupported) {
+      // Skip interaction check if not supported in browser
+      return;
+    }
+
+    let observer: IntersectionObserver;
+    if (node && node.parentElement) {
+      observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            onInViewCallbackRef.current();
+          }
+        },
+        {
+          root: document.body,
+        }
+      );
+      observer.observe(node);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [node]);
+
+  return {
+    ref: setRef,
+  };
+};