Add a loader

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')