Merge pull request #1176 from Human-Connection/845-load-more

845 load more

webapp/nuxt.config.js

@@ -100,6 +100,7 @@ module.exports = {
     { 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 },
   ],
 
   router: {

webapp/package.json

@@ -76,6 +76,7 @@
     "tiptap-extensions": "~1.26.2",
     "v-tooltip": "~2.0.2",
     "vue-count-to": "~1.0.13",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-izitoast": "roschaefer/vue-izitoast#patch-1",
     "vuex-i18n": "~1.13.1",
     "vue-sweetalert-icons": "~4.2.0",

webapp/pages/index.spec.js

@@ -5,6 +5,7 @@ import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
 import VTooltip from 'v-tooltip'
 import FilterMenu from '~/components/FilterMenu/FilterMenu'
+import InfiniteScroll from '~/plugins/vue-infinite-scroll'
 
 const localVue = createLocalVue()
 
@@ -12,6 +13,7 @@ localVue.use(Vuex)
 localVue.use(Styleguide)
 localVue.use(Filters)
 localVue.use(VTooltip)
+localVue.use(InfiniteScroll)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 config.stubs['router-link'] = '<span><slot /></span>'

webapp/pages/index.vue

@@ -33,7 +33,16 @@
         primary
       />
     </no-ssr>
-    <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
+    <div
+      v-if="hasMore"
+      v-infinite-scroll="showMoreContributions"
+      :infinite-scroll-immediate-check="true"
+      :infinite-scroll-disabled="$apollo.loading"
+      :infinite-scroll-distance="10"
+      :infinite-scroll-throttle-delay="800"
+    >
+      <hc-load-more v-if="true" :loading="$apollo.loading" @click="showMoreContributions" />
+    </div>
   </div>
 </template>
 

webapp/pages/profile/_id/_slug.spec.js

@@ -3,12 +3,14 @@ import ProfileSlug from './_slug.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
+import InfiniteScroll from '~/plugins/vue-infinite-scroll'
 
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
 localVue.use(Filters)
+localVue.use(InfiniteScroll)
 localVue.filter('date', d => d)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'

webapp/pages/profile/_id/_slug.vue

@@ -229,7 +229,14 @@
             </ds-flex-item>
           </template>
         </ds-flex>
-        <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
+        <div
+          v-if="hasMore"
+          v-infinite-scroll="showMoreContributions"
+          infinite-scroll-disabled="$apollo.loading"
+          infinite-scroll-distance="10"
+        >
+          <hc-load-more :loading="$apollo.loading" @click="showMoreContributions" />
+        </div>
       </ds-flex-item>
     </ds-flex>
   </div>

webapp/plugins/vue-infinite-scroll.js

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

webapp/yarn.lock

@@ -14887,9 +14887,13 @@ 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-scroll@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
+  integrity sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==
+
 vue-izitoast@roschaefer/vue-izitoast#patch-1:
   version "1.1.2"
-  uid ba6b03eb24c7c04c299e64a9703e101bf158ae50
   resolved "https://codeload.github.com/roschaefer/vue-izitoast/tar.gz/ba6b03eb24c7c04c299e64a9703e101bf158ae50"
   dependencies:
     izitoast "^1.3.0"