Merge pull request #82 from evrimagaci/can/loading-svg

Loading Animation

components/Loading.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="loading" v-html="PeriodumLoadingSvg" />
+</template>
+
+<script>
+import PeriodumLoadingSvg from '~/assets/images/Periodum.svg?raw'
+
+export default {
+  name: 'Loading',
+  data() {
+    return {
+      PeriodumLoadingSvg,
+    }
+  },
+}
+</script>
+
+<style>
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: #000;
+}
+</style>

nuxt.config.js

@@ -35,6 +35,7 @@ module.exports = {
     '@nuxtjs/eslint-module',
     // https://go.nuxtjs.dev/stylelint
     '@nuxtjs/stylelint-module',
+    '@nuxtjs/svg',
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules

package.json

@@ -64,6 +64,7 @@
     "@nuxtjs/eslint-config": "^6.0.0",
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/stylelint-module": "^4.0.0",
+    "@nuxtjs/svg": "^0.4.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/user-event": "^13.5.0",
     "@testing-library/vue": "^5.8.2",

pages/index.vue

@@ -109,6 +109,7 @@
       @selectElement="selectElement"
       @incOrDec="incOrDecCompoundElements"
     />
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -157,6 +158,7 @@ export default {
       selectedElement: null,
       compoundElements: [],
       selectedElementForCompound: null,
+      loading: false,
     }
   },
   watch: {
@@ -167,23 +169,18 @@ export default {
       }
     },
   },
-  created() {
-    this.$axios
-      .get(`/api/compounds`)
-      .then(({ data }) => {
-        this.$store.commit('SET_COMPOUNDS', data)
-      })
-      .finally(() => {
-        this.$store.commit('SET_COMPOUNDS_FETCHED', true)
-      })
-    this.$axios
-      .get(`/api/isotopes`)
-      .then(({ data }) => {
-        this.$store.commit('SET_ISOTOPES', data)
-      })
-      .finally(() => {
-        this.$store.commit('SET_ISOTOPES_FETCHED', true)
-      })
+  async created() {
+    this.loading = true
+
+    const { data: compoundData } = await this.$axios.get(`/api/compounds`)
+    this.$store.commit('SET_COMPOUNDS', compoundData)
+    this.$store.commit('SET_COMPOUNDS_FETCHED', true)
+
+    const { data: isotopeData } = await this.$axios.get(`/api/isotopes`)
+    this.$store.commit('SET_ISOTOPES', isotopeData)
+    this.$store.commit('SET_ISOTOPES_FETCHED', true)
+
+    this.loading = false
   },
   methods: {
     incOrDecCompoundElements(payload) {