Merge pull request #15 from Mikescops/bugfix/rendering-large-screen

Improve infinite loading rendering
Mikescops · Dec 15, 2020 · 75c06a6 · 75c06a6
2 parents 5d68e8e + 54a3ef0
commit 75c06a6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 23 deletions.
diff --git a/example/App.vue b/example/App.vue
@@ -3,10 +3,10 @@
         <img alt="Vue logo" src="./assets/logo.png" /> <br />
         <a class="button" v-on:click="resetList()">Reset Component</a>
         <VirtualGrid
-            :v-if="loaded"
+            v-if="loaded"
             ref="virtualgrid"
             :items="list"
-            :updateFunction="pullData"
+            :updateFunction="pullDataWithDelay"
             :debug="true"
             :loader="loaderComponent"
             @event-test="alertTest"
@@ -117,7 +117,11 @@ export default class App extends Vue {
         this.offset += 1;
 
         // Wait between each response just to see the loader
-        return new Promise((resolve) => setTimeout(() => resolve(false), 2000));
+        return Promise.resolve(false);
+    }
+
+    pullDataWithDelay(): Promise<boolean> {
+        return new Promise((resolve) => setTimeout(() => resolve(this.pullData()), 2000));
     }
 
     resetList() {

diff --git a/example/components/Map.vue b/example/components/Map.vue
@@ -7,12 +7,7 @@
             scrolling="no"
             marginheight="0"
             marginwidth="0"
-            :src="
-                'https://www.openstreetmap.org/export/embed.html?bbox=' +
-                item.injected.coordinates +
-                '&amp;layer=mapnik'
-            "
-            style="border: 1px solid black"
+            :src="`https://www.openstreetmap.org/export/embed.html?bbox=${item.injected.coordinates}&amp;layer=mapnik`"
         ></iframe>
     </div>
 </template>

diff --git a/src/VirtualGrid.vue b/src/VirtualGrid.vue
@@ -96,9 +96,10 @@ export default class VirtualGrid<P> extends Vue {
     }
 
     mounted() {
+        this.ref = this.$refs.virtualGrid as Element;
+        this.initiliazeGrid();
         window.addEventListener('resize', this.resize);
         window.addEventListener('scroll', this.scroll);
-        this.initializeGridData();
     }
 
     beforeDestroy() {
@@ -107,12 +108,22 @@ export default class VirtualGrid<P> extends Vue {
     }
 
     resize(): void {
-        this.computeContainerData();
+        this.loadMoreData();
     }
 
     scroll(): void {
+        this.loadMoreData();
+    }
+
+    initiliazeGrid(): void {
         this.computeContainerData();
-        this.loadMoreData(this.containerData)
+        this.$nextTick(async () => {
+            this.loadMoreData();
+        });
+    }
+
+    loadMoreData(): void {
+        this.loadMoreDataAsync()
             .catch((error) => {
                 if (error) {
                     console.error('Fail to load next data batch', error);
@@ -121,18 +132,17 @@ export default class VirtualGrid<P> extends Vue {
             .then();
     }
 
-    initializeGridData(): void {
-        this.ref = this.$refs.virtualGrid as Element;
+    async loadMoreDataAsync(): Promise<void> {
         this.computeContainerData();
-    }
 
-    async loadMoreData(containerData: ContainerData): Promise<void> {
-        const windowTop = containerData.windowScroll.y;
-        const windowBottom = windowTop + containerData.windowSize.height;
-        const bottomTrigger =
-            containerData.elementWindowOffset + containerData.elementSize.height - this.updateTriggerMargin;
+        const windowTop = this.containerData.windowScroll.y;
+        const windowBottom = windowTop + this.containerData.windowSize.height;
+        const bottomTrigger = Math.max(
+            0,
+            this.containerData.elementWindowOffset + this.containerData.elementSize.height - this.updateTriggerMargin
+        );
 
-        if (!this.bottomReached && windowBottom > bottomTrigger && !this.updateLock) {
+        if (!this.bottomReached && windowBottom >= bottomTrigger && !this.updateLock) {
             this.updateLock = true;
 
             debugLog(this.debug, 'Loading next batch');
@@ -144,8 +154,9 @@ export default class VirtualGrid<P> extends Vue {
             }
 
             this.updateLock = false;
+            await this.loadMoreDataAsync();
         }
-        return Promise.resolve();
+        return;
     }
 
     computeContainerData(): void {
@@ -345,7 +356,7 @@ export default class VirtualGrid<P> extends Vue {
 
     resetGrid(): void {
         this.bottomReached = false;
-        this.initializeGridData();
+        this.loadMoreData();
     }
 
     /** Utils */