fix: fd-virtualized-list now uses vue-observe-visibility to track the visibility of the footer

Author: ChristianKienle

src/components/VirtualizedList/VirtualizedList.vue

@@ -8,7 +8,11 @@
     @scroll.native="handleOnScroll"
   >
     <template v-slot:after>
-      <div ref="after">
+      <div
+        style="height: 10px;"
+        ref="after"
+        v-observe-visibility="afterVisibilityChanged"
+      >
         <template v-if="isLoading">
           <slot name="loading">
             <fd-spinner v-if="isLoading" />
@@ -98,23 +102,25 @@ export default {
     });
   },
   methods: {
+    afterVisibilityChanged(isVisible) {
+      this.afterSlotVisible = isVisible;
+      if (isVisible) {
+        this.loadMoreItemsIfNeeded();
+      }
+    },
     loadMoreItemsIfNeeded() {
       const { totalItemCount, isLoading } = this;
       const loadingIsPossible = totalItemCount != null && !isLoading;
       if (!loadingIsPossible) {
         return;
       }
       const isNeeded =
-        this.afterSlotIsVisible() && totalItemCount > this.items.length;
+        this.afterSlotVisible && totalItemCount > this.items.length;
       if (!isNeeded) {
         return;
       }
       this.startToLoadMoreItems();
     },
-    afterSlotIsVisible() {
-      const { $el, $refs } = this;
-      return $refs.after.getBoundingClientRect().top <= $el.scrollHeight;
-    },
     startToLoadMoreItems(event) {
       if (this.loadMoreItems != null) {
         this.state = "loading";
@@ -157,6 +163,7 @@ export default {
   },
   data() {
     return {
+      afterSlotVisible: false,
       state: "default",
       selectedId: null,
       items_: this.items

src/docs/index.js

@@ -4,13 +4,15 @@ import App from "./App.vue";
 import Router from "vue-router";
 import DocumentationLoader from "./DocumentationLoader";
 import VueVirtualScroller from "vue-virtual-scroller";
+import VueObserveVisibility from "vue-observe-visibility";
 import { DocsRouter } from "./DocsRouter";
 import { registerComponents } from "./components";
 import "./main.scss";
 
 Vue.config.productionTip = false;
 Vue.use(FundamentalVue);
 Vue.use(VueVirtualScroller);
+Vue.use(VueObserveVisibility);
 
 // Register Layouts globally so that they are available by name
 import DefaultLayout from "./layouts/DefaultLayout.vue";

src/docs/pages/Virtualized List/0-VirtualizedList.vue

@@ -2,6 +2,14 @@
 
 <docs>
 You can use `fd-virtualized-list` when you need to display a lot of data in a scrollable list. `fd-virtualized-list` only renders what is currently on your screen. Offscreen data is not rendered. Thus scrolling through your list should be very efficient. `fd-virtualized-list` depends on a 3rd-party (open source) library called [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller). *Fundamental Vue* does not include a copy of [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller). It is up to you to properly setup [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller).
+
+<div class="tip" style="border-left: 0.5rem solid #ffa94a;">
+  <div class="tip-title">IMPORTANT</div>
+  <div class="tip-body">
+    <p>You also have to install <a href="https://github.com/Akryum/vue-observe-visibility">vue-observe-visibility</a>. <code>fd-virtualized-list</code> makes use of the <code>v-observe-visibility</code>-directive.</p>
+  </div>
+</div>
+
 </docs>
 
 <condensed />