New modules and InfiniteScroll init

src/components/InfiniteScroll.vue

@@ -13,24 +13,37 @@ export default class InfiniteScroll extends Vue {
   @Prop({ default: 100 })
   readonly distance!: number;
   private observer!: IntersectionObserver;
+  private isInitialized = false;
 
   mounted() {
-    const options = {
-      root: this.$refs.scrollContainer as HTMLElement,
-      rootMargin: `0px 0px ${this.distance}px 0px`,
-      threshold: 1.0,
-    };
-    this.observer = new IntersectionObserver(this.handleIntersection, options);
-    this.observer.observe(this.$refs.sentinel as HTMLElement);
+    this.$nextTick(() => {
+      this.isInitialized = true;
+      console.log("onMounted");
+      const options = {
+        root: this.$refs.scrollContainer as HTMLElement,
+        rootMargin: `0px 0px ${this.distance}px 0px`,
+        threshold: 1.0,
+      };
+      this.observer = new IntersectionObserver(
+        (entries) => this.handleIntersection(entries),
+        options
+      );
+      this.observer.observe(this.$refs.sentinel as HTMLElement);
+    });
   }
 
   beforeUnmount() {
     this.observer.disconnect();
   }
+
   @Emit("reached-bottom")
   handleIntersection(entries: IntersectionObserverEntry[]) {
+    console.log("handleIntersection");
+    if (!this.isInitialized) {
+      return false;
+    }
     const entry = entries[0];
-    if (entry.isIntersecting) {
+    if (entry.isIntersecting && entry.intersectionRatio > 0) {
       return true;
     }
     return false;