Use loading message instead of circle

Author: DannyFeliz

src/App.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <loading :active="isLoading" />
+    <loading :active="isLoading" :opacity="0.9">
+      <div class="loading-content">
+        <span>Loading...</span>
+        <p>Please wait until we get all the data.</p>
+      </div>
+    </loading>
     <AppNav />
     <div class="container">
       <router-view />
@@ -43,6 +48,11 @@ export default {
 <style lang="scss" scoped>
 @import "./assets/global";
 
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .md-content {
   padding: 16px;
   height: 100%;