Add thread display placeholder

src/components/routes/UserThreads.vue

@@ -9,6 +9,10 @@
 			v-if='threads.length'
 		>
 			<thread-display v-for='thread in threads' :thread='thread'></thread-display>
+			<thread-display-placeholder
+				v-if='loadingThreads'
+				v-for='n in nextThreadsCount'
+			></thread-display-placeholder>
 		</scroll-load>
 		<template v-else>This user hasn't started any threads yet</template>
 	</div>
@@ -17,6 +21,7 @@
 <script>
 	import ScrollLoad from '../ScrollLoad'
 	import ThreadDisplay from '../ThreadDisplay'
+	import ThreadDisplayPlaceholder from '../ThreadDisplayPlaceholder'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 
@@ -25,13 +30,15 @@
 		props: ['username'],
 		components: {
 			ThreadDisplay,
+			ThreadDisplayPlaceholder,
 			ScrollLoad
 		},
 		data () {
 			return {
 				threads: [],
 				loadingThreads: false,
-				nextURL: ''
+				nextURL: '',
+				nextThreadsCount: 0
 			}
 		},
 		methods: {
@@ -47,6 +54,7 @@
 
 						this.threads.push(...res.data.Threads)
 						this.nextURL = res.data.meta.nextURL
+						this.nextThreadsCount = res.data.meta.nextThreadsCount
 					})
 					.catch((e) => {
 						this.loadingThreads = false
@@ -61,6 +69,7 @@
 				.then(res => {
 					this.threads = res.data.Threads
 					this.nextURL = res.data.meta.nextURL
+					this.nextThreadsCount = res.data.meta.nextThreadsCount
 				})
 				.catch(AjaxErrorHandler(this.$store))
 		}