refrescar asincronicamente/eficientemente en varias partes

src/components/Barca.vue

@@ -11,10 +11,7 @@
       </div>
     </header>
     <template v-if="barca.abordada">
-      <div class="loading-container" v-if="loading">
-        <LoadingIcono class="loading-anim" />
-      </div>
-      <ul v-else-if="consensosMostrados">
+      <ul v-if="consensosMostrados" :class="{ 'is-loading': loading }">
         <li v-for="consenso in consensosMostrados">
           <p>
             <a :href="`#/barcas/${barca.id}/consensos/${consenso.id}`">{{
@@ -42,7 +39,7 @@ export default {
   props: ['barca', 'borderColor', 'updateKey'],
   components: { InIcono, LoadingIcono },
   data() {
-    return { loading: true }
+    return { loading: false }
   },
   computed: {
     ...mapState(['consensos']),
@@ -73,6 +70,9 @@ export default {
         .catch(error => this.$emit('error', error))
     },
   },
+  mounted() {
+    this.refrescar()
+  },
   watch: {
     updateKey() {
       this.refrescar()
@@ -103,6 +103,8 @@ export default {
     padding: 0
     margin: 0
     list-style: none
+    &.is-loading
+      opacity: .5
     li
       padding-left: .5em
       border-left: 4px solid var(--border-color)
@@ -116,10 +118,4 @@ export default {
           text-decoration: none
           &:hover
             text-decoration: underline
-  .loading-container
-    width: 100%
-    svg
-      margin: .5em auto
-      max-width: 3em
-      display: block
 </style>

src/views/Barca.vue

@@ -10,7 +10,7 @@
           tag="button"
           class="primary circle"
           :to="`/barcas/${barcaId}/consensos/crear`"
-          v-if="barca.abordada"
+          v-if="barca && barca.abordada"
         >
           <InIcono />
         </router-link>
@@ -27,8 +27,7 @@
         </router-link>
       </div>
     </nav>
-    <h1 v-if="loading">Cargando...</h1>
-    <div v-else-if="error">
+    <div v-if="error">
       <template v-if="error === 'forbidden'">
         <h2>No tenés permiso para acceder a esta barca.</h2>
         <p>
@@ -38,7 +37,7 @@
       </template>
       <h1 v-else>Error: {{ error }}</h1>
     </div>
-    <template v-else-if="consensos.length > 0">
+    <template v-if="consensos.length > 0">
       <template v-for="consenso in consensosNuevos">
         <consenso :consenso="consenso" :barcaId="barcaId" :key="consenso.id" />
         <hr />
@@ -60,12 +59,12 @@
         class="red btn-abandonar"
         tag="button"
         :to="`/barcas/${barcaId}/abandonar`"
-        v-if="barca.abordada"
+        v-if="barca && barca.abordada"
       >
         Abandonar barca
       </router-link>
     </template>
-    <template v-else>
+    <template v-else-if="!loading">
       <h3>No hay ningun consenso creado.</h3>
     </template>
   </div>

src/views/Barcas.vue

@@ -104,12 +104,12 @@ export default {
     refrescar() {
       this.error = null
       this.loading = true
+      this.updateKey = ++this.updateKey
       return this.$store
         .dispatch('conseguirTodasLasBarcas')
         .catch(error => (this.error = error))
         .finally(() => {
           this.loading = false
-          this.updateKey = ++this.updateKey
         })
     },
   },