From 810525b697968826843aaa20bb92aae979f475df Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Mon, 26 Aug 2024 20:58:31 +0100
Subject: [PATCH 1/4] fix: calling observe on null values Refactor is visible
 utility function

---
 src/components/InfiniteLoading.vue | 38 +++++++++++++++++-------------
 src/types.ts                       |  2 +-
 src/utils.ts                       | 26 ++++++++++++++------
 3 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/components/InfiniteLoading.vue b/src/components/InfiniteLoading.vue
index 5f050ea..10fe098 100644
--- a/src/components/InfiniteLoading.vue
+++ b/src/components/InfiniteLoading.vue
@@ -1,16 +1,18 @@
 <script lang="ts" setup>
 import type { Props, Params, State, StateHandler } from "@root/types";
-import { onMounted, ref, toRefs, onUnmounted, watch, nextTick } from "vue";
+import { onMounted, ref, toRefs, onUnmounted, watch } from "vue";
 import { startObserver, getParentEl, isVisible, updateScrollPosition } from "@root/utils";
 // @ts-ignore
 import Spinner from "./Spinner.vue";
 
 const emit = defineEmits<{ infinite: [$state: StateHandler] }>();
+
 const props = withDefaults(defineProps<Props>(), {
   top: false,
   firstload: true,
   distance: 0,
 });
+
 defineSlots<{
   spinner(props: {}): any;
   complete(props: {}): any;
@@ -19,6 +21,7 @@ defineSlots<{
 
 let observer: IntersectionObserver | null = null;
 let prevHeight = 0;
+
 const infiniteLoading = ref(null);
 const state = ref<State>("");
 const { top, firstload, distance } = props;
@@ -38,23 +41,18 @@ const params: Params = {
   },
 };
 
-const resetObserver = () => {
-  observer?.disconnect();
-  observer = startObserver(params);
-};
-
 const stateHandler: StateHandler = {
   loading() {
     state.value = "loading";
   },
   async loaded() {
     state.value = "loaded";
-    if (top) updateScrollPosition(params, prevHeight);
+    await updateScrollPosition(params, prevHeight);
     if (isVisible(infiniteLoading.value!, params.parentEl)) params.emit();
   },
   async complete() {
     state.value = "complete";
-    if (top) updateScrollPosition(params, prevHeight);
+    await updateScrollPosition(params, prevHeight);
     observer?.disconnect();
   },
   error() {
@@ -62,22 +60,23 @@ const stateHandler: StateHandler = {
   },
 };
 
-watch(identifier, () => {
-  resetObserver();
-});
+function resetObserver() {
+  observer?.disconnect();
+  observer = startObserver(params);
+}
+
+watch(identifier, resetObserver);
 
 onMounted(async () => {
-  params.parentEl = await getParentEl(target!);
+  params.parentEl = await getParentEl(target);
   resetObserver();
 });
 
-onUnmounted(() => {
-  observer?.disconnect();
-});
+onUnmounted(() => observer?.disconnect());
 </script>
 
 <template>
-  <div ref="infiniteLoading" style="min-height: 1px">
+  <div ref="infiniteLoading" class="v3-infinite-loading">
     <div v-show="state == 'loading'">
       <slot name="spinner">
         <Spinner />
@@ -96,11 +95,17 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+.v3-infinite-loading {
+  width: 100%;
+  height: 44px;
+}
+
 .state-error {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 .retry {
   margin-top: 8px;
   padding: 2px 6px 4px 6px;
@@ -114,6 +119,7 @@ onUnmounted(() => {
   outline: none;
   cursor: pointer;
 }
+
 .retry:hover {
   opacity: 0.8;
 }
diff --git a/src/types.ts b/src/types.ts
index 4ff2ebe..e57dd82 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,6 @@
 import type { Ref } from "vue";
 
-export type Target = HTMLElement | string | null | undefined;
+export type Target = HTMLElement | string;
 
 export type State = "" | "loading" | "loaded" | "complete" | "error";
 
diff --git a/src/utils.ts b/src/utils.ts
index a465577..4099e0a 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -2,14 +2,25 @@ import { nextTick } from "vue";
 import type { Ref } from "vue";
 import type { Params, Target } from "./types";
 
-function isVisible(el: Element, view: Element | null): boolean {
+function isVisible(el: Element, view: Element | null = null): boolean {
+  if (!el) return false;
+
   const elRect = el.getBoundingClientRect();
-  if (!view) return elRect.top >= 0 && elRect.bottom <= window.innerHeight;
-  const viewRect = view.getBoundingClientRect();
-  return elRect.top >= viewRect.top && elRect.bottom <= viewRect.bottom;
+  const viewRect = view
+    ? view.getBoundingClientRect()
+    : { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth };
+
+  return (
+    elRect.bottom >= viewRect.top &&
+    elRect.top <= viewRect.bottom &&
+    elRect.right >= viewRect.left &&
+    elRect.left <= viewRect.right
+  );
 }
 
-async function getParentEl(target: Ref<Target>): Promise<Element | null> {
+async function getParentEl(target?: Ref<Target | undefined>): Promise<Element | null> {
+  if (!target) return null;
+
   await nextTick();
   if (target.value instanceof HTMLElement) return target.value;
   return target.value ? document.querySelector(target.value) : null;
@@ -28,13 +39,14 @@ function startObserver(params: Params) {
     },
     { root: params.parentEl, rootMargin }
   );
-  observer.observe(params.infiniteLoading.value!);
+  if (params.infiniteLoading.value) observer.observe(params.infiniteLoading.value);
   return observer;
 }
 
 async function updateScrollPosition(params: Params, prevHeight: number) {
-  const parentEl = params.parentEl || document.documentElement;
   await nextTick();
+  if (!params.top) return;
+  const parentEl = params.parentEl || document.documentElement;
   parentEl.scrollTop = parentEl.scrollHeight - prevHeight;
 }
 

From 8d1977e3c10f8eca77849c82b9334b2402b2c86d Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Mon, 26 Aug 2024 20:58:58 +0100
Subject: [PATCH 2/4] Fix node version in eslint.yml

---
 .github/workflows/eslint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 175b030..27ac48c 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '20'
+          node-version: "20"
 
       - name: Install Dependencies
         run: npm install -g pnpm && pnpm install

From 33b27f1ede0c6da97006bee517b54a9f9598da38 Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Mon, 26 Aug 2024 20:59:31 +0100
Subject: [PATCH 3/4] Refactor(demo): comments loading logic

---
 demo/src/App.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 9408a47..04ca201 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -64,20 +64,22 @@ const distanceHandler = async () => {
   mountToggler();
   refresh();
 };
+
+const limit = 200;
 const load = async $state => {
   console.log("loading more...");
-  page++;
   try {
     const response = await fetch(
-      "https://jsonplaceholder.typicode.com/comments?_limit=5&_page=" + page
+      `https://jsonplaceholder.typicode.com/comments?_limit=${limit}&_page=${++page}`
     );
     const json = await response.json();
-    if (json.length < 5) $state.complete();
-    else {
+    if (json.length) {
       if (!top.value) comments.value.push(...json);
-      else comments.value.unshift(...json);
+      else comments.value.unshift(...json.reverse());
       $state.loaded();
     }
+
+    if (json.length < limit) $state.complete();
   } catch (error) {
     $state.error();
   }

From 474145693282dc5fe5141b82b22362e9fe52f7f7 Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Mon, 26 Aug 2024 21:13:29 +0100
Subject: [PATCH 4/4] fix(workflow): Update npm install command in ESLint
 workflow

---
 .github/workflows/eslint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 27ac48c..cb7ed8f 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -22,7 +22,7 @@ jobs:
           node-version: "20"
 
       - name: Install Dependencies
-        run: npm install -g pnpm && pnpm install
+        run: npm install -g pnpm && pnpm i --frozen-lockfile
 
       - name: Run ESLint
         run: pnpm run lint