Add loading placeholder

src/components/routes/UserPosts.vue

@@ -1,10 +1,16 @@
 <template>
-	<div class='user_posts' :class='{ "user_posts--no_border_bottom": !posts.length }'>
+	<div class='user_posts' :class='{ "user_posts--no_border_bottom": posts && !posts.length }'>
 		<div class='user_posts__title'>Posts by {{username}}</div>
+
+		<template v-if='!posts'>
+			<thread-post-placeholder v-if='!posts'>
+			</thread-post-placeholder>
+		</template>
+
 		<scroll-load
 			:loading='loadingPosts'
 			@loadNext='loadNewPosts'
-			v-if='posts.length'
+			v-else-if='posts.length'
 		>
 			<thread-post
 				v-for='(post, index) in posts'
@@ -15,7 +21,7 @@
 			<thread-post-placeholder
 				v-if='loadingPosts'
 				v-for='n in nextPostsCount'
-			>
+			></thread-post-placeholder>
 		</scroll-load>
 		<template v-else>This user hasn't posted anything yet</template>
 	</div>
@@ -38,7 +44,7 @@
 		},
 		data () {
 			return {
-				posts: [],
+				posts: null,
 				loadingPosts: false,
 				nextPostsCount: 0,
 				nextURL: ''
@@ -55,6 +61,8 @@
 					.then(res => {
 						this.loadingPosts = false
 
+						if(!this.posts) this.posts = []
+
 						let currentPostsIds = this.posts.map(p => p.id)
 						let filteredPosts =
 							res.data.Posts.filter(p => !currentPostsIds.includes(p.id))

src/components/routes/UserThreads.vue

@@ -1,12 +1,19 @@
 <template>
 	<div class='user_threads'>
 		<div class='user_threads__title'>Threads by {{username}}</div>
+
+		<template v-if='!threads'>
+			<thread-display-placeholder v-for='n in 10'>
+			</thread-display-placeholder>
+		</template>
+		
+
 		<scroll-load
 			:loading='loadingThreads'
 			:showNext='nextURL !== null'
 			@loadNext='loadNewThreads'
 			message='threads'
-			v-if='threads.length'
+			v-else-if='threads.length'
 		>
 			<thread-display v-for='thread in threads' :thread='thread'></thread-display>
 			<thread-display-placeholder
@@ -14,6 +21,7 @@
 				v-for='n in nextThreadsCount'
 			></thread-display-placeholder>
 		</scroll-load>
+
 		<template v-else>This user hasn't started any threads yet</template>
 	</div>
 </template>
@@ -35,7 +43,7 @@
 		},
 		data () {
 			return {
-				threads: [],
+				threads: null,
 				loadingThreads: false,
 				nextURL: '',
 				nextThreadsCount: 0
@@ -52,6 +60,8 @@
 					.then(res => {
 						this.loadingThreads = false
 
+						if(!this.threads) this.threads = []
+
 						this.threads.push(...res.data.Threads)
 						this.nextURL = res.data.meta.nextURL
 						this.nextThreadsCount = res.data.meta.nextThreadsCount