Preparation for loading

gabenparadise/public/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "Gaben Paradise",
     "short_name": "Gaben Paradise",
-    "theme_color": "#4DBA87",
+    "theme_color": "#24ACF2",
     "icons": [
         {
             "src": "./img/icons/android-chrome-192x192.png",

gabenparadise/src/components/GamesList.vue

@@ -1,16 +1,7 @@
 <template>
-
-<div class="text-center">
-  <b-spinner label="Spinning"></b-spinner>
-  <b-spinner type="grow" label="Spinning"></b-spinner>
-  <b-spinner variant="primary" label="Spinning"></b-spinner>
-  <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
-  <b-spinner variant="success" label="Spinning"></b-spinner>
-  <b-spinner variant="success" type="grow" label="Spinning"></b-spinner>
-</div>
-
   <div class="row">
     <div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name">
+      <a :href="game.url">
         <div class="item">
           <div class="item-image">
             <img class="item-image-main" :src="game.image" />
@@ -18,33 +9,34 @@
           </div>
           <div class="item-details">
             <div>
-            <a :href="game.url">
               <h5 style="display: inline-block;">{{game.name}}</h5>
+            </div>
+            <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
+          </div>
+        </div>
       </a>
     </div>
-
-          <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
-
-        </div>
-      </div>
+    <div class="text-center">
+      <b-spinner type="grow" label="Spinning"></b-spinner>
     </div>
   </div>
 </template>
 
 <style>
-.item {
+  .item {
     height: 100%;
     background: #222;
     border-radius: 10px;
-}
+  }
 
-.item-image {
+  .item-image {
     display: block;
-  padding-bottom: 60%; /* 60% sirky */
+    padding-bottom: 60%;
+    /* 60% sirky */
     position: relative;
-}
+  }
 
-.item-image-main {
+  .item-image-main {
     border-radius: 10px 10px 0 0;
     width: 100%;
     height: 100%;
@@ -52,34 +44,35 @@
     left: 0;
     top: 0;
     object-fit: cover;
-}
-.item-image-icon {
+  }
+
+  .item-image-icon {
     position: absolute;
     left: 10px;
     top: 10px;
     width: 30px;
     height: auto;
-}
+  }
 
-.item-details {
+  .item-details {
     padding: 10px;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-}
+  }
 
-.item-counts {
+  .item-counts {
     border: 1px solid green;
     color: green;
     padding: 4px;
     font-size: 12px;
     font-weight: 600;
-}
+  }
 </style>
 
 <script>
-import axios from "axios";
-export default {
+  import axios from "axios";
+  export default {
     data() {
       return {
         games: []
@@ -87,14 +80,16 @@ export default {
     },
     async created() {
       try {
-      const res = async axios.get(
+        var res = async axios.get(
           "https://api.gabenparadise.com/api/data",
           { crossdomain: true }
         );
         this.games = res.data;
       } catch (e) {
         console.error(e);
+      } finally {
+        console.error('finally');
       }
     }
-};
+  };
 </script>