Update Profile component, add bookmark loader

resources/assets/js/components/Profile.vue

@@ -210,6 +210,16 @@
 						</infinite-loading>
 					</div>
 					<div v-if="mode == 'bookmarks'">
+						<div v-if="bookmarksLoading">
+							<div class="row">
+								<div class="col-12">
+									<div class="p-1 p-sm-2 p-md-3 d-flex justify-content-center align-items-center" style="height: 30vh;">
+										<img src="/img/pixelfed-icon-grey.svg" class="">
+									</div>
+								</div>
+							</div>
+						</div>
+						<div v-else>
 							<div v-if="bookmarks.length" class="row">
 								<div class="col-4 p-1 p-sm-2 p-md-3" v-for="(s, index) in bookmarks">
 									<a class="card info-overlay card-md-border-0" :href="s.url">
@@ -242,6 +252,7 @@
 								</div>
 							</div>
 						</div>
+					</div>
 					<div v-if="mode == 'collections'">
 						<div v-if="collections.length" class="row">
 							<div class="col-4 p-1 p-sm-2 p-md-3" v-for="(c, index) in collections">
@@ -641,6 +652,7 @@
 				followingModalSearch: null,
 				followingModalSearchCache: null,
 				followingModalTab: 'following',
+				bookmarksLoading: true,
 			}
 		},
 		beforeMount() {
@@ -789,7 +801,8 @@
 				if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
 					axios.get('/api/local/bookmarks')
 					.then(res => {
-						this.bookmarks = res.data
+						this.bookmarks = res.data;
+						this.bookmarksLoading = false;
 					});
 				}
 				if(this.mode == 'collections' && this.collections.length == 0) {