Ad loading screen on post find

src/components/projectFeed.vue

@@ -3,6 +3,7 @@ import Simplebar from 'simplebar-vue';
 
 import SpotIcon from '@components/spotIcon';
 import ProjectPost from '@components/projectPost';
+import { faHistory, faThumbTackSlash } from '@fortawesome/free-solid-svg-icons';
 
 export default {
 	components: {
@@ -16,7 +17,8 @@ export default {
 	},
 	data() {
 		return {
-			loading: false,
+			loadingFeed: false,
+			loadingPost: false,
 			updatable: true,
 			outOfData: false,
 			refIdFirst: 0,
@@ -57,10 +59,16 @@ export default {
 		this.getScrollElement()?.removeEventListener('scroll', this.onFeedScroll);
 		this.setUpdateTimer(-1);
 	},
+	computed: {
+		loading() {
+			return this.loadingFeed || this.loadingPost;
+		}
+	},
 	methods: {
 		async init(pMapIsReady) {
 			this.setUpdateTimer(-1);
-			this.loading = false;
+			this.loadingFeed = false;
+			this.loadingPost = false;
 			this.updatable = true;
 			this.outOfData = false;
 			this.refIdFirst = 0;
@@ -70,24 +78,26 @@ export default {
 			this.swipe = {x: null, y: null};
 
 			this.toggle(!this.isMobile(), 0);
-			
-			await this.getNextFeed();
 			this.getScrollElement().scrollTop = 0;
-			this.syncUpdateTimer();
 
 			//Direct link post action
-			await (this.hash.items.length == 3)
+			await(this.hash.items.length == 3
 				? this.findPost(this.hash.items[1], this.hash.items[2], pMapIsReady)
-				: Promise.resolve();
+				: this.getNextFeed()
+			);
+			
+			this.syncUpdateTimer();
 		},
 		getScrollElement() {
 			return this.$refs.feedSimpleBar?.scrollElement;
 		},
 		async findPost(sPostType, iPostId, pMapIsReady = Promise.resolve()) {
+			this.loadingPost = true;
 			let vPost = await this.goToPost(sPostType, iPostId);
 			if(vPost) {
 				await pMapIsReady;
 				await vPost.executeMainAction(0);
+				this.loadingPost = false;
 				return vPost;
 			}
 			else if(!this.outOfData) {
@@ -95,12 +105,15 @@ export default {
 				await this.$nextTick();
 				return this.findPost(sPostType, iPostId, pMapIsReady);
 			}
-			else console.log('Missing element ID "'+iPostId+'" of type "'+sPostType+'"');
-			return null;
+			else {
+				console.log('Missing element ID "'+iPostId+'" of type "'+sPostType+'"');
+				this.loadingPost = false;
+				return null;
+			}
 		},
 		async goToPost(sPostType, iPostId) {
-			let avPosts = this.$refs.posts.filter((post) => {return post.postId == sPostType+'-'+iPostId;});
-			if(avPosts.length == 0) return null;
+			let avPosts = this.$refs?.posts?.filter((post) => {return post.postId == sPostType+'-'+iPostId;});
+			if(!avPosts || avPosts.length == 0) return null;
 
 			//Force next update to have enough subsequent elements to position the post on top of the page
 			await this.getNextFeed();
@@ -115,10 +128,10 @@ export default {
 			return vPost;
 		},
 		async getNextFeed() {
-			if(!this.project || this.outOfData || this.loading) return true;
+			if(!this.project || this.outOfData || this.loadingFeed) return true;
 
 			//Get next chunk
-			this.loading = true;
+			this.loadingFeed = true;
 			let aoData = await this.api.get('next_feed', {id_project: this.project.id, id: this.refIdLast});
 			let iPostCount = Object.keys(aoData.feed).length;
 
@@ -132,7 +145,7 @@ export default {
 			//Add posts
 			this.posts.push(...aoData.feed);
 
-			this.loading = false;
+			this.loadingFeed = false;
 			this.firstChunk = false;
 
 			return true;
@@ -203,12 +216,12 @@ export default {
 
 <template>
 	<div id="feed" class="panel panel-right" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
-		<Simplebar id="feed-panel" class="panel-content" ref="feedSimpleBar">
+		<Simplebar id="feed-panel" class="panel-content" ref="feedSimpleBar" :aria-busy="loading">
 			<div id="feed-header">
 				<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
 				<ProjectPost v-else :options="{type: 'poster', relative_time: lang.get('post.new_message')}" />
 			</div>
-			<div v-if="project" id="feed-posts">
+			<div v-if="project" v-show="!loadingPost" id="feed-posts">
 				<ProjectPost v-for="post in posts" :options="post" ref="posts" />
 			</div>
 			<div id="feed-footer" v-if="loading">