Use pagination

src/components/routes/Index.vue

@@ -26,9 +26,15 @@
 					{{category.name}}
 				</div>
 			</div>
-			<div class='threads_main__threads' v-if='filteredThreads.length'>
+			<scroll-load
+				class='threads_main__threads'
+				v-if='filteredThreads.length'
+				:loading='loading'
+				@loadNext='getThreads'
+			>
 				<thread-display v-for='thread in filteredThreads' :thread='thread'></thread-display>
-			</div>
+				<thread-display-placeholder v-for='n in nextThreadsCount'></thread-display-placholder>
+			</scroll-load>
 			<div v-else class='threads_main__threads thread--empty'>No threads or posts.</div>
 		</div>
 	</div>
@@ -36,7 +42,9 @@
 
 <script>
 	import TabView from '../TabView'
+	import ScrollLoad from '../ScrollLoad'
 	import ThreadDisplay from '../ThreadDisplay'
+	import ThreadDisplayPlaceholder from '../ThreadDisplayPlaceholder'
 	import SelectOptions from '../SelectOptions'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
@@ -45,7 +53,9 @@
 		name: 'index',
 		components: {
 			TabView,
+			ScrollLoad,
 			ThreadDisplay,
+			ThreadDisplayPlaceholder,
 			SelectOptions
 		},
 		data () {
@@ -57,6 +67,10 @@
 				],
 				selectedFilterOption: 'NEW',
 
+				nextURL: '',
+				nextThreadsCount: 0,
+				loading: false,
+
 				threads: []
 			}
 		},
@@ -94,7 +108,6 @@
 				});
 			},
 			categories () {
-				console.log(this.$store.getters.alphabetizedCategories)
 				return this.$store.getters.alphabetizedCategories
 			},
 			selectedCategory: {
@@ -111,12 +124,24 @@
 				this.$router.push('/thread/' + slug + '/' + id);
 			},
 			getThreads () {
+				if(this.nextURL === null) return
+
+				this.loading = true
+
 				this.axios
-					.get('/api/v1/category/' + this.selectedCategory)
+					.get(this.nextURL || '/api/v1/category/' + this.selectedCategory)
 					.then(res => {
-						this.threads = res.data.Threads
+						this.loading = false
+
+						this.threads.push(...res.data.Threads)
+						this.nextURL = res.data.meta.nextURL
+						this.nextThreadsCount = res.data.meta.nextThreadsCount
+					})
+					.catch((e) => {
+						this.loading = false
+
+						AjaxErrorHandler(this.$store)(e)
 					})
-					.catch(AjaxErrorHandler(this.$store))
 			}
 		},
 		watch: {