refactor(scenery): improved components visibility on API data loading

src/components/SceneryView/SceneryHeader.vue

@@ -1,10 +1,6 @@
 <template>
   <section class="info-header">
-    <button
+    <button class="btn btn-return" :title="$t('scenery.return-btn')" @click="onReturnButtonClick">
-      class="btn btn-return"
-      :title="$t('scenery.return-btn')"
-      @click="onReturnButtonClick"
-    >
       <img src="/images/icon-back.svg" alt="return button" />
     </button>
 
@@ -12,10 +8,6 @@
       {{ stationName.replace(/_/g, ' ') }}
     </a>
 
-    <div class="scenery-abbrev" v-if="station?.generalInfo?.abbr">
-      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo.abbr }}</b>
-    </div>
-
     <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
   </section>
 </template>
@@ -81,13 +73,7 @@ function onReturnButtonClick() {
   text-transform: uppercase;
 }
 
-.scenery-abbrev {
-  font-size: 1.3em;
-  color: #aaa;
-}
-
 .scenery-hash {
-  margin-top: 0.5em;
   color: #aaa;
   font-size: 1.2em;
 }

src/components/SceneryView/SceneryInfo.vue

@@ -1,29 +1,32 @@
 <template>
   <div class="scenery-info">
     <section>
+      <div class="info-station-data" v-if="apiStore.dataStatuses.sceneries == Status.Data.Loaded">
         <SceneryInfoIcons :station="station" />
         <SceneryInfoGeneral :station="station" />
         <SceneryInfoRoutes v-if="station" :station="station" />
         <SceneryInfoAuthors :station="station" />
+      </div>
 
-      <div style="margin: 1em 0; height: 2px; background-color: white"></div>
+      <div class="info-station-loading" v-else>
+        <Loading />
+      </div>
+
+      <div class="info-divider"></div>
 
-      <!-- info dispatcher -->
       <SceneryInfoDispatcher :onlineScenery="onlineScenery" />
 
-      <div class="info-lists">
+      <div class="info-online-lists">
-        <!-- user list -->
         <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
-
-        <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
       </div>
     </section>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { PropType, defineComponent } from 'vue';
+import { PropType } from 'vue';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 
 import SceneryInfoDispatcher from './SceneryInfo/SceneryInfoDispatcher.vue';
 import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
@@ -32,20 +35,12 @@ import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 import SceneryInfoGeneral from './SceneryInfo/SceneryInfoGeneral.vue';
 import SceneryInfoAuthors from './SceneryInfo/SceneryInfoAuthors.vue';
+import { useApiStore } from '../../store/apiStore';
+import Loading from '../Global/Loading.vue';
 
-import { ActiveScenery, Station } from '../../typings/common';
+const apiStore = useApiStore();
 
-export default defineComponent({
+defineProps({
-  components: {
-    SceneryInfoDispatcher,
-    SceneryInfoGeneral,
-    SceneryInfoIcons,
-    SceneryInfoAuthors,
-    SceneryInfoUserList,
-    SceneryInfoSpawnList,
-    SceneryInfoRoutes
-  },
-  props: {
   station: {
     type: Object as PropType<Station>
   },
@@ -53,14 +48,21 @@ export default defineComponent({
   onlineScenery: {
     type: Object as PropType<ActiveScenery>
   }
-  }
 });
 </script>
 
 <style lang="scss" scoped>
 @use '../../styles/responsive';
 
-.info-lists {
+.info-station-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 300px;
+}
+
+.info-online-lists {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
@@ -68,6 +70,12 @@ export default defineComponent({
   margin-top: 1em;
 }
 
+.info-divider {
+  margin: 1em 0;
+  height: 3px;
+  background-color: #5b5b5b;
+}
+
 .scenery-topic a {
   font-weight: bold;
 }

src/components/SceneryView/SceneryInfo/SceneryInfoGeneral.vue

@@ -5,8 +5,13 @@
     </div>
 
     <div v-else>
+      <div>
         <span>
-        <b>{{ $t('availability.title') }}:</b>
+          <b>{{ $t('scenery.abbrev') }}</b> {{ station.generalInfo.abbr }}
+        </span>
+
+        <span>
+          &bull; <b>{{ $t('availability.title') }}:</b>
           {{ $t(`availability.${station.generalInfo.availability}`) }}
 
           <span v-if="station.generalInfo.reqLevel > -1">
@@ -51,6 +56,7 @@
           {{ additionalTools.join(', ') }}
         </span>
       </div>
+    </div>
   </section>
 </template>
 
@@ -84,9 +90,9 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+}
 
-  div {
+.scenery-abbrev {
-    margin: 0 0.15em;
+  font-size: 1.05em;
-  }
 }
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -1,5 +1,6 @@
 <template>
-  <section class="info-icons">
+  <section class="info-icons-section">
+    <div class="icons-box">
       <span v-if="!station || !station.generalInfo">
         <img
           class="icon-info"
@@ -12,7 +13,7 @@
       <span
         v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
         class="scenery-icon icon-info level"
-      :style="calculateExpStyle(station?.generalInfo.reqLevel)"
+        :style="calculateExpStyles(station?.generalInfo.reqLevel)"
       >
         {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
       </span>
@@ -83,33 +84,31 @@
         alt="dSAT ASDEK"
         :title="$t('sceneries.info.ASDEK')"
       />
+    </div>
   </section>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { PropType, defineComponent } from 'vue';
+import { PropType } from 'vue';
-import styleMixin from '../../../mixins/styleMixin';
 import { Station } from '../../../typings/common';
+import { calculateExpStyles } from '../../../composables/badge';
 
-export default defineComponent({
+defineProps({
-  mixins: [styleMixin],
-  props: {
   station: {
     type: Object as PropType<Station>
   }
-  }
 });
 </script>
 
 <style lang="scss" scoped>
 @use '../../../styles/icons';
 
-.info-icons {
+.icons-box {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 
-  margin: 1em;
+  margin: 0.5em;
 }
 
 .icon-info {