/ Fixed the scope of the nest-loader component

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

@@ -1,15 +1,22 @@
 <template>
   <div class="celestial-list-wrapper">
-    <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
+    <div v-if="celestials && celestials.length > 1">
-    <ul v-if="celestials" class="celestial-list grid no-style">
+      <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
-      <li
+
-        v-for="(celestial, index) in sortedCelestials"
+      <ul v-if="celestials" class="celestial-list grid no-style">
-        :key="index"
+        <li
-        class="celestial-item"
+          v-for="(celestial, index) in sortedCelestials"
-      >
+          :key="index"
-        <celestial-card :celestial="celestial" />
+          class="celestial-item"
-      </li>
+        >
-    </ul>
+          <celestial-card :celestial="celestial" />
+        </li>
+      </ul>
+    </div>
+
+    <div v-else>
+      <nest-loader />
+    </div>
   </div>
 </template>
 
@@ -17,13 +24,15 @@
 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,46 +1,41 @@
 <template>
   <section class="celestial bg-image">
-    <div v-if="celestialLoaded">
+    <header>
-      <header>
+      <h1 class="heading-1">
-        <h1 class="heading-1">
+        <span>{{ celestial.name }}</span>
-          <span>{{ celestial.name }}</span>
+        <span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
-          <span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
+        <span class="txt-capitalize">- {{ celestial.type }}</span>
-          <span class="txt-capitalize">- {{ celestial.type }}</span>
+      </h1>
-        </h1>
+    </header>
-      </header>
+    <div class="section-content">
-      <div class="section-content">
+      <main class="celestial-body">
-        <main class="celestial-body">
+        <div>
-          <div>
+          <h3 class="heading-3">
-            <h3 class="heading-3">
+            Informations
-              Informations
+          </h3>
-            </h3>
+          <p v-if="celestial.aroundPlanet">
-            <p v-if="celestial.aroundPlanet">
+            Orbite autour de
-              Orbite autour de
+            <nuxt-link
-              <nuxt-link
+              :to="`/astres/${celestial.aroundPlanet.planet}`"
-                :to="`/astres/${celestial.aroundPlanet.planet}`"
+              class="txt-capitalize"
-                class="txt-capitalize"
+            >
-              >
+              {{ celestial.aroundPlanet.planet }}
-                {{ celestial.aroundPlanet.planet }}
+            </nuxt-link>
-              </nuxt-link>
+          </p>
-            </p>
+          <p v-if="celestial.discoveredBy">
-            <p v-if="celestial.discoveredBy">
+            Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
-              Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
+          </p>
-            </p>
+          <p>Facteur Gravité : {{ celestial.gravity }}</p>
-            <p>Facteur Gravité : {{ celestial.gravity }}</p>
+          <p>Facteur Densité : {{ celestial.density }}</p>
-            <p>Facteur Densité : {{ celestial.density }}</p>
+          <p>Inclinaison : {{ celestial.inclination }}</p>
-            <p>Inclinaison : {{ celestial.inclination }}</p>
+        </div>
-          </div>
+        <div v-if="celestial.moons" class="celestial-moons">
-          <div v-if="celestial.moons" class="celestial-moons">
+          <h2 class="heading-2">
-            <h2 class="heading-2">
+            Astres orbitant {{ celestial.name }}
-              Astres orbitant {{ celestial.name }}
+          </h2>
-            </h2>
+          <celestials-list :celestials="celestial.moons" :has-filters="false" />
-            <celestials-list :celestials="celestial.moons" :has-filters="false" />
+        </div>
-          </div>
+      </main>
-        </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,
+      celestialLoaded: false
-      excerpt: '',
-      error: ''
     }
   },
 

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

@@ -6,15 +6,7 @@
       </h1>
     </header>
     <div class="section-content">
-      <div v-if="error">
+      <celestials-list :celestials="celestials" />
-        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,
+    CelestialsList
-    NestLoader
   },
   data () {
     return {
-      celestials: [],
+      celestials: []
-      error: ''
     }
   },