/ Fixed the scope of the nest-loader component

full-skies-nuxt/components/celestials/CelestialsList.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="celestial-list-wrapper">
+    <div v-if="celestials && celestials.length > 1">
       <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
+
       <ul v-if="celestials" class="celestial-list grid no-style">
         <li
           v-for="(celestial, index) in sortedCelestials"
@@ -11,19 +13,26 @@
         </li>
       </ul>
     </div>
+
+    <div v-else>
+      <nest-loader />
+    </div>
+  </div>
 </template>
 
 <script>
 import { defineComponent } from '@vue/composition-api'
 
 import CelestialCard from '@/components/celestials/CelestialCard.vue'
+import NestLoader from '@/components/NestLoader.vue'
 import CelestialFilters from './CelestialFilters.vue'
 
 export default defineComponent({
   name: 'CelestialList',
   components: {
     CelestialCard,
-    CelestialFilters
+    CelestialFilters,
+    NestLoader
   },
   props: {
     celestials: {

full-skies-nuxt/pages/astres/_slug.vue

@@ -1,6 +1,5 @@
 <template>
   <section class="celestial bg-image">
-    <div v-if="celestialLoaded">
     <header>
       <h1 class="heading-1">
         <span>{{ celestial.name }}</span>
@@ -38,10 +37,6 @@
         </div>
       </main>
     </div>
-    </div>
-    <div v-else>
-      <nest-loader />
-    </div>
   </section>
 </template>
 
@@ -51,20 +46,14 @@ import { fetchCelestial } from '@/api/le-systeme-solaire'
 // import { fetchWikipediaExcerpt } from "@/api/wikipedia";
 
 // Global methods
-import NestLoader from '@/components/NestLoader.vue'
 
 export default {
   name: 'Celestial',
-  components: {
-    NestLoader
-  },
 
   data () {
     return {
       celestial: {},
-      celestialLoaded: false,
-      excerpt: '',
-      error: ''
+      celestialLoaded: false
     }
   },
 

full-skies-nuxt/pages/astres/index.vue

@@ -6,16 +6,8 @@
       </h1>
     </header>
     <div class="section-content">
-      <div v-if="error">
-        Une erreur est survenue : {{ error }}
-      </div>
-      <div v-if="celestials.length > 1">
       <celestials-list :celestials="celestials" />
     </div>
-      <div v-else>
-        <nest-loader />
-      </div>
-    </div>
   </section>
 </template>
 
@@ -24,20 +16,16 @@
 import { fetchCelestials } from '@/api/le-systeme-solaire'
 
 // Global methods
-
 import CelestialsList from '@/components/celestials/CelestialsList.vue'
-import NestLoader from '@/components/NestLoader.vue'
 
 export default {
   name: 'Celestials',
   components: {
-    CelestialsList,
-    NestLoader
+    CelestialsList
   },
   data () {
     return {
-      celestials: [],
-      error: ''
+      celestials: []
     }
   },