feat(smart-cards): handle dynamic loading error

src/assets/components/base.scss

@@ -55,6 +55,10 @@
           background-color: var(--card-background);
         }
       }
+      .component-error .card {
+        border: 1px solid rgba(255, 33, 33, 0.664);
+        background-color: rgba(255, 58, 58, 0.24);
+      }
 
       .message {
         .message-body {

src/components/Service.vue

@@ -5,7 +5,7 @@
 
 <script>
 import { defineAsyncComponent } from "vue";
-
+import errorComponent from "./services/_error.vue";
 const defaultService = "Generic";
 
 export default {
@@ -19,9 +19,11 @@ export default {
       return defaultService === (this.item.type || defaultService);
     },
     component() {
-      return defineAsyncComponent(
-        () => import(`./services/${this.item.type}.vue`),
-      );
+      return defineAsyncComponent({
+        loader: () => import(`./services/${this.item.type}.vue`),
+        errorComponent: errorComponent,
+        timeout: 3000,
+      });
     },
   },
 };

src/components/services/OpenWeather.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{ 'component-error': error }">
     <div class="card" :class="item.class">
       <a
         :href="`https://openweathermap.org/city/${id}`"
@@ -18,10 +18,12 @@
               </figure>
             </div>
             <div class="media-content">
-              <p v-if="error" class="error">Data could not be retrieved</p>
-              <div v-else>
+              <div>
                 <p class="title is-4">{{ name }}</p>
-                <p class="subtitle is-6">
+                <p v-if="error" class="subtitle is-6">
+                  Fail to load weather information
+                </p>
+                <p v-else class="subtitle is-6">
                   <span>
                     {{ temperature }}
                   </span>
@@ -31,6 +33,7 @@
                 </p>
               </div>
             </div>
+            <div v-if="error" name="indicator" class="indicator">⚠️</div>
           </div>
           <div v-if="item.tag" class="tag" :class="item.tagstyle">
             <strong class="tag-text">#{{ item.tag }}</strong>
@@ -109,6 +112,7 @@ export default {
         })
         .catch((e) => {
           console.log(e);
+          this.name = this.item.name;
           this.error = true;
         });
     },

src/components/services/_error.vue

@@ -0,0 +1,22 @@
+<template>
+  <Generic :item="item" :title="error.message" class="component-error">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">Failed to load component</p>
+    </template>
+    <template #indicator>⚠️</template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+
+export default {
+  name: "Error",
+  mixins: [service],
+  props: {
+    item: Object,
+    error: Object,
+  },
+};
+</script>