fixed loading placeholder style and search component showing on loading

src/components/BaseLoadingPlaceholder.vue

@@ -1,5 +1,5 @@
 <template functional>
-	<div :id="props.id" class="loading_placeholder" v-show="!props.hidden">
+	<div :id="props.id" class="loading_placeholder" :class="{ 'loading_placeholder--hidden': props.hidden }">
 		<span class="loading_placeholder__text">{{ props.text }}</span>
 		<div class="lds-ring">
 			<div></div>

src/components/TheContent.vue

@@ -3,7 +3,8 @@
 	<section id="content">
 		<div id="container">
 			<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
-			<router-view></router-view>
+
+			<router-view v-show="!loading"></router-view>
 		</div>
 	</section>
 </template>
@@ -54,7 +55,6 @@ export default {
 	}),
 	mounted() {
 		this.$root.$on('updateSearchLoadingState', loading => {
-			console.log({ loading })
 			this.loading = loading
 		})
 	}

src/components/TheMainSearch.vue

@@ -631,11 +631,8 @@ export default {
 			}
 		},
 		handleMainSearch(result) {
-			this.$root.$emit('updateSearchLoadingState', false)
-
 			// Hiding loading placeholder
-			// document.getElementById('content').style.display = ''
-			// document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
+			this.$root.$emit('updateSearchLoadingState', false)
 
 			let resetObj = { data: [], next: 0, total: 0, loaded: false }
 

src/styles/scss/globals/_globals.scss

@@ -241,7 +241,7 @@ a {
 }
 
 .loading_placeholder {
-	// display: flex;
+	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;