Add a loader

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.3.1",
         "ol": "^7.2.2",
         "vue": "^3.2.45",
+        "vue-loading-overlay": "^6.0.3",
         "vue3-openlayers": "^0.1.71"
       },
       "devDependencies": {
@@ -1324,6 +1325,17 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "node_modules/vue-loading-overlay": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.3.tgz",
+      "integrity": "sha512-Ab0hqnVKasVS2mNUo8Wkm95mSbk5fXp/karZmMou5yP0hTUOox/kZuBLNwgzJ4kFP829wFJl7O7FN1Dr0kRaVQ==",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue3-openlayers": {
       "version": "0.1.71",
       "resolved": "https://registry.npmjs.org/vue3-openlayers/-/vue3-openlayers-0.1.71.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^1.3.1",
     "ol": "^7.2.2",
     "vue": "^3.2.45",
+    "vue-loading-overlay": "^6.0.3",
     "vue3-openlayers": "^0.1.71"
   },
   "devDependencies": {

src/components/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="getLiveTrainData">Show</button>
+  <button @click="getLiveTrainData">Fetch Data</button>
   <button @click="postLiveTrainData">Populate Database</button>
 
   <!--Sidebar, fades out on click of X button-->
@@ -75,11 +75,26 @@ export default {
     }
   },
 
-  methods: {
+  created() {
+    // initial request of fata
+    this.getLiveTrainData()
+
+    // request new data every 60 seconds
+    // window.setInterval(this.getLiveTrainData, 60000);
+  },
+
+  methods: { 
     // fetch live train data from the Firestore database
     getLiveTrainData() {
+      let loader = this.$loading.show({
+        loader: 'dots',
+        container: this.$refs.container,
+        canCancel: false
+      });
+
       axios.get('https://us-central1-concept-d5be1.cloudfunctions.net/getLiveTrainData')
       .then((response) => {
+        loader.hide();
         this.dbLiveTrainData = response.data;
 
         // create an array of coordinates and hashmap with the key-values {index: JSON obj}
@@ -257,4 +272,4 @@ export default {
   left: 50%;
   z-index: 0;
 }
-</style>
+</style>

src/main.js

@@ -4,7 +4,10 @@ import App from './App.vue'
 import OpenLayersMap from 'vue3-openlayers'
 import 'vue3-openlayers/dist/vue3-openlayers.css'
 
+import { LoadingPlugin } from 'vue-loading-overlay'
+import 'vue-loading-overlay/dist/css/index.css'
+
 const app = createApp(App);
 app.use(OpenLayersMap)
-
+app.use(LoadingPlugin)
 app.mount('#app')