Fix infinite scrolling out of control

webapp/layouts/default.vue

@@ -6,11 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ lg: '3.5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
-              <nuxt-link
-                :to="{ name: 'index' }"
-                @click.native="refreshPosts({ i18n: $i18n })"
-                v-scroll-to="'.main-navigation'"
-              >
+              <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
                 <ds-logo />
               </nuxt-link>
             </ds-flex-item>
@@ -143,7 +139,6 @@ export default {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
-      refreshPosts: 'posts/refreshPosts',
     }),
     goToPost(item) {
       this.$nextTick(() => {

webapp/nuxt.config.js

@@ -118,7 +118,7 @@ export default {
     { src: '~/plugins/v-tooltip.js', ssr: false },
     { src: '~/plugins/izi-toast.js', ssr: false },
     { src: '~/plugins/vue-filters.js' },
-    { src: '~/plugins/vue-infinite-scroll.js', ssr: false },
+    { src: '~/plugins/vue-infinite-loading.js', ssr: false },
   ],
 
   router: {

webapp/package.json

@@ -83,6 +83,7 @@
     "v-tooltip": "~2.0.2",
     "validator": "^12.0.0",
     "vue-count-to": "~1.0.13",
+    "vue-infinite-loading": "^2.4.4",
     "vue-infinite-scroll": "^2.0.2",
     "vue-izitoast": "^1.2.1",
     "vue-scrollto": "^2.17.1",

webapp/pages/index.vue

@@ -16,7 +16,7 @@
         </div>
       </ds-grid-item>
       <template v-if="hasResults">
-        <masonry-grid-item v-for="post in currentPosts" :key="post.id">
+        <masonry-grid-item v-for="post in posts" :key="post.id">
           <hc-post-card
             :post="post"
             :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
@@ -44,16 +44,11 @@
         primary
       />
     </client-only>
-    <div
-      v-if="hasMore"
-      v-infinite-scroll="showMoreContributions"
-      :infinite-scroll-disabled="$apollo.loading"
-      :infinite-scroll-distance="10"
-      :infinite-scroll-throttle-delay="800"
-      :infinite-scroll-immediate-check="true"
-    >
-      <hc-load-more :loading="$apollo.loading" @click="showMoreContributions" />
-    </div>
+    <client-only>
+      <infinite-loading v-if="hasMore" @infinite="showMoreContributions">
+        <hc-load-more :loading="$apollo.loading" @click="showMoreContributions" />
+      </infinite-loading>
+    </client-only>
   </div>
 </template>
 
@@ -97,7 +92,6 @@ export default {
       orderBy: 'posts/orderBy',
       selectedOrder: 'posts/selectedOrder',
       sortingIcon: 'posts/orderIcon',
-      currentPosts: 'posts/currentPosts',
     }),
     selected: {
       get() {
@@ -105,7 +99,7 @@ export default {
       },
       set({ value }) {
         this.offset = 0
-        this.setCurrentPosts([])
+        this.posts = []
         this.selectOrder(value)
       },
     },
@@ -123,13 +117,12 @@ export default {
       return filter
     },
     hasResults() {
-      return this.$apollo.loading || (this.currentPosts && this.currentPosts.length > 0)
+      return this.$apollo.loading || (this.posts && this.posts.length > 0)
     },
   },
   methods: {
     ...mapMutations({
       selectOrder: 'posts/SELECT_ORDER',
-      setCurrentPosts: 'posts/SET_CURRENT_POSTS',
     }),
     clearSearch() {
       this.$router.push({ path: '/' })
@@ -141,7 +134,7 @@ export default {
         params: { id: post.id, slug: post.slug },
       }).href
     },
-    showMoreContributions() {
+    showMoreContributions($state) {
       const { Post: PostQuery } = this.$apollo.queries
       if (!PostQuery) return // seems this can be undefined on subpages
 
@@ -156,7 +149,9 @@ export default {
         updateQuery: (previousResult, { fetchMoreResult }) => {
           if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) {
             this.hasMore = false
+            $state.complete()
           }
+
           const result = {
             ...previousResult,
             Post: [
@@ -168,19 +163,19 @@ export default {
               ...fetchMoreResult.Post,
             ],
           }
-          this.setCurrentPosts(result.Post)
+          $state.loaded()
+          return result
         },
       })
     },
     deletePost(deletedPost) {
-      const posts = this.currentPosts.filter(post => {
+      this.posts = this.posts.filter(post => {
         return post.id !== deletedPost.id
       })
-      this.setCurrentPosts(posts)
     },
     resetPostList() {
       this.offset = 0
-      this.setCurrentPosts([])
+      this.posts = []
       this.hasMore = true
     },
     pinPost(post) {
@@ -224,7 +219,7 @@ export default {
         }
       },
       update({ Post }) {
-        this.setCurrentPosts(Post)
+        this.posts = Post
       },
       fetchPolicy: 'cache-and-network',
     },

webapp/pages/profile/_id/_slug.vue

@@ -255,16 +255,14 @@
             </ds-grid-item>
           </template>
         </masonry-grid>
-        <div
-          v-if="hasMore && posts.length >= pageSize"
-          v-infinite-scroll="showMoreContributions"
-          :infinite-scroll-disabled="$apollo.loading"
-          :infinite-scroll-distance="10"
-          :infinite-scroll-throttle-delay="800"
-          :infinite-scroll-immediate-check="true"
-        >
-          <hc-load-more :loading="$apollo.loading" @click="showMoreContributions" />
-        </div>
+        <client-only>
+          <infinite-loading
+            v-if="hasMore && posts.length >= pageSize"
+            @infinite="showMoreContributions"
+          >
+            <hc-load-more :loading="$apollo.loading" @click="showMoreContributions" />
+          </infinite-loading>
+        </client-only>
       </ds-flex-item>
     </ds-flex>
   </div>

webapp/plugins/vue-infinite-loading.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import InfiniteLoading from 'vue-infinite-loading'
+
+Vue.use(InfiniteLoading, { props: { distance: 10 }, system: { throttleLimit: 800 } })

webapp/plugins/vue-infinite-scroll.js

@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import infiniteScroll from 'vue-infinite-scroll'
-
-Vue.use(infiniteScroll)

webapp/store/posts.js

@@ -4,8 +4,6 @@ import xor from 'lodash/xor'
 import isEmpty from 'lodash/isEmpty'
 import isEqual from 'lodash/isEqual'
 import clone from 'lodash/clone'
-import { filterPosts } from '~/graphql/PostQuery'
-import { first, offset } from '~/constants/posts'
 
 const defaultFilter = {}
 
@@ -28,7 +26,6 @@ export const state = () => {
       ...defaultFilter,
     },
     order: orderOptions['createdAt_desc'],
-    currentPosts: [],
   }
 }
 
@@ -77,9 +74,6 @@ export const mutations = {
   SELECT_ORDER(state, value) {
     state.order = orderOptions[value]
   },
-  SET_CURRENT_POSTS(state, posts) {
-    state.currentPosts = posts
-  },
 }
 
 export const getters = {
@@ -120,26 +114,4 @@ export const getters = {
   orderIcon(state) {
     return state.order.icon
   },
-  currentPosts(state) {
-    return state.currentPosts || []
-  },
-}
-
-export const actions = {
-  async refreshPosts({ commit, getters }, { i18n }) {
-    const client = this.app.apolloProvider.defaultClient
-    const {
-      data: { Post },
-    } = await client.query({
-      query: filterPosts(i18n),
-      variables: {
-        filter: getters.filter,
-        first,
-        orderBy: ['pinned_asc', getters.orderBy],
-        offset,
-      },
-    })
-    commit('SET_CURRENT_POSTS', Post)
-    return Post
-  },
 }

webapp/yarn.lock

@@ -16331,6 +16331,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
+vue-infinite-loading@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/vue-infinite-loading/-/vue-infinite-loading-2.4.4.tgz#8a9defb9ceeea797c057cb36bdf558a4b2ce409f"
+  integrity sha512-eIFBcyKqkivtsDDq7Ee5ybDJVGLxIzU1NcBJCHG7Zx9Ic66QEGzSPs2OPJlGUdtu0/RS7KpUER35ZP/a7FdSOg==
+
 vue-infinite-scroll@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"