fix: bug with unstoppable loader triggering

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ts-pro/vue-eternal-loading",
   "description": "Infinity loading component vue3 projects.",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/vue-eternal-loading.common.js",
   "types": "./src/main.ts",
   "exports": {

src/App.vue

@@ -1,10 +1,16 @@
 <template>
-  <button @click="reset">Reset list</button>
-  <div v-for="(item, index) in items" :key="index" class="item">
-    page {{ parseInt(index / 10) + 1 }} | {{ item }}
+  <div class="box" ref="boxRef">
+    <button @click="reset">Reset list</button>
+    <div v-for="(item, index) in items" :key="index" class="item">
+      page {{ parseInt(index / 10) + 1 }} | {{ item }}
+    </div>
+    <VueEternalLoading
+      v-model:is-initial="isInitial"
+      :load="load"
+      :container="boxRef"
+    >
+    </VueEternalLoading>
   </div>
-  <VueEternalLoading v-model:is-initial="isInitial" :load="load">
-  </VueEternalLoading>
 </template>
 
 <script lang="ts">
@@ -21,6 +27,7 @@ export default defineComponent({
   setup() {
     const items = ref<string[]>([]);
     const isInitial = ref(true);
+    const boxRef = ref<HTMLElement | null>(null);
     let page = 1;
 
     function load({ loaded, noMore }: LoadAction) {
@@ -62,6 +69,7 @@ export default defineComponent({
       items,
       isInitial,
       reset,
+      boxRef,
     };
   },
 });
@@ -77,4 +85,10 @@ button {
   padding: 5px;
   background-color: #ccc;
 }
+.box {
+  width: 500px;
+  height: 500px;
+  outline: 1px solid black;
+  overflow: scroll;
+}
 </style>

src/components/VueEternalLoading/VueEternalLoading.vue

@@ -59,7 +59,7 @@ export default defineComponent({
     container: {
       required: false,
       type: Object as PropType<HTMLElement | null>,
-      default: document.documentElement,
+      default: null,
     },
     margin: {
       required: false,
@@ -80,12 +80,12 @@ export default defineComponent({
       nextTick(() => {
         if (props.position === 'top') {
           restoreScrollVerticalPosition(
-            props.container as HTMLElement,
+            props.container ?? document.documentElement,
             scrollSize
           );
         } else if (props.position === 'left') {
           restoreScrollHorizontalPosition(
-            props.container as HTMLElement,
+            props.container ?? document.documentElement,
             scrollSize
           );
         }
@@ -163,10 +163,12 @@ export default defineComponent({
           if (entry.isIntersecting) {
             if (props.position === 'top') {
               scrollSize = getScrollHeightFromEl(
-                props.container as HTMLElement
+                props.container ?? document.documentElement
               );
             } else if (props.position === 'left') {
-              scrollSize = getScrollWidthFromEl(props.container as HTMLElement);
+              scrollSize = getScrollWidthFromEl(
+                props.container ?? document.documentElement
+              );
             }
             unobserve();
             props.load(
@@ -193,16 +195,13 @@ export default defineComponent({
     let observer: IntersectionObserver;
     watchEffect(
       () => {
-        // Container can be null for the first `mount` if we pass here parent's `ref`.
-        if (props.container !== null) {
-          // Stop old observer if it exists
-          if (observer) {
-            unobserve();
-          }
-
-          observer = createObserver();
-          observe();
+        // Stop old observer if it exists
+        if (observer) {
+          unobserve();
         }
+
+        observer = createObserver();
+        observe();
       },
       {
         flush: 'post',