Dodano komponent z animacją ładowania

src/App.vue

@@ -47,14 +47,14 @@
             </span>
 
             <span class="header_links">
-              <router-link class="route" active-class="route-active" to="/" exact
+              <router-link class="route" active-class="route-active" to="/" exact>
-                >{{ $t('app.sceneries') }}
+                {{ $t('app.sceneries') }}
               </router-link>
               /
-              <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }} </router-link>
+              <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
               /
-              <router-link class="route" active-class="route-active" to="/journal?view=timetables"
+              <router-link class="route" active-class="route-active" to="/journal">
-                >{{ $t('app.journal') }}
+                {{ $t('app.journal') }}
               </router-link>
             </span>
           </div>
@@ -65,14 +65,11 @@
         <router-view v-slot="{ Component }">
           <!-- <transition name="view-anim" mode="out-in"> -->
           <keep-alive>
-            <component :is="Component" :key="$route.fullPath" />
+            <component :is="Component" :key="$route.path" />
           </keep-alive>
-          <!-- </transition> -->
         </router-view>
       </main>
 
-      <!-- <MobileNav /> -->
-
       <footer class="app_footer">
         &copy;
         <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
@@ -108,8 +105,6 @@ export default defineComponent({
     const store = useStore();
     store.connectToAPI();
 
-    // const sceneryDataStatus = computed(() => data.value.sceneryDataStatus);
-
     const isFilterCardVisible = ref(false);
 
     provide('isFilterCardVisible', isFilterCardVisible);
@@ -127,8 +122,8 @@ export default defineComponent({
 
   computed: {
     trainList() {
-      return this.store.trainList.filter(train => train.online);
+      return this.store.trainList.filter((train) => train.online);
-    }
+    },
   },
 
   data: () => ({

src/components/Global/Loading.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="loading">
+    <span class="loading-circle"></span>
+    <span class="loading-circle"></span>
+    <span class="loading-circle"></span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin-top: 2em;
+}
+
+.loading-circle {
+  width: 1.25em;
+  padding-top: 1.25em;
+
+  border-radius: 50%;
+
+  background-color: white;
+  margin: 0 0.25em;
+
+  animation: anim 0.45s ease-in-out infinite alternate;
+
+  &:nth-child(odd) {
+    background-color: salmon;
+  }
+}
+
+@for $i from 1 through 3 {
+  .loading-circle:nth-child(#{$i}n) {
+    animation-delay: #{($i - 1) * 0.15}s;
+  }
+}
+
+@keyframes anim {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.45);
+  }
+}
+</style>

src/store/store.ts

@@ -344,8 +344,6 @@ export const useStore = defineStore('store', {
       socket.on('UPDATE', (data: APIData) => {
         this.apiData = data;
         this.setOnlineData();
-
-        console.log(data);
       });
 
       socket.emit('FETCH_DATA', {}, (data: APIData) => {

src/styles/JournalSection.scss

@@ -8,27 +8,23 @@
   }
 
   &-enter-active {
-    transition: all 120ms ease-out;
+    transition: all 150ms ease-out;
   }
 
   &-leave-active {
-    transition: all 120ms ease-out;
+    transition: all 150ms ease-out;
   }
 }
 
-.journal-list-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.5s ease;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-}
 
 //Styles
+
+.journal-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .journal-wrapper {
   width: 1350px;
   padding: 1em 0;
@@ -48,18 +44,12 @@
 }
 
 .journal_item,
-.journal_warning,
+.journal_warning {
-.journal_loading {
   background: #202020;
   padding: 1em;
   margin: 1em 0;
 }
 
-.journal_loading {
-  text-align: center;
-  font-size: 1.35em;
-}
-
 .journal_top-bar {
   display: flex;
   justify-content: space-between;
@@ -69,7 +59,6 @@
 
 button.btn {
   padding: 0.5em 0.7em;
-
 }
 
 @include smallScreen() {