Work on export and moving to Vue composition API

src/components/messages/composition/useLazyLoad.ts

@@ -0,0 +1,39 @@
+import { ComponentInstance, onBeforeUnmount, Ref, ref, ShallowRef, watch } from "vue";
+import Intersect, { ObserveDirectiveBinding } from "vuetify/directives/intersect";
+
+export const useLazyLoad = (props: { root: Readonly<ShallowRef<ComponentInstance<any>>> }) => {
+  const isVisible: Ref<boolean> = ref(false);
+  const binding: Ref<ObserveDirectiveBinding | undefined> = ref(undefined);
+
+  watch(
+    props.root,
+    (newval: ComponentInstance<any>) => {
+      if (newval && !binding.value) {
+        const binding: ObserveDirectiveBinding = {
+          modifiers: {
+            once: false,
+            quiet: false,
+          },
+          value(isIntersecting, entries, observer) {
+            isVisible.value = isIntersecting;
+          },
+          instance: newval,
+          oldValue: undefined,
+          dir: {},
+        };
+        Intersect.mounted(newval.$el, binding);
+      }
+    },
+    { immediate: true }
+  );
+
+  onBeforeUnmount(() => {
+    if (binding.value && binding.value.instance) {
+      Intersect.unmounted(binding.value.instance.$el, binding.value);
+    }
+  });
+
+  return {
+    isVisible,
+  };
+};