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

src/components/SceneryView/SceneryHeader.vue

@@ -1,10 +1,6 @@
 <template>
   <section class="info-header">
-    <button
-      class="btn btn-return"
-      :title="$t('scenery.return-btn')"
-      @click="onReturnButtonClick"
-    >
+    <button 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>
-      <SceneryInfoIcons :station="station" />
-      <SceneryInfoGeneral :station="station" />
-      <SceneryInfoRoutes v-if="station" :station="station" />
-      <SceneryInfoAuthors :station="station" />
+      <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">
-        <!-- user list -->
+      <div class="info-online-lists">
         <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
-
-        <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
       </div>
     </section>
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 
 import SceneryInfoDispatcher from './SceneryInfo/SceneryInfoDispatcher.vue';
 import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
@@ -32,27 +35,18 @@ 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({
-  components: {
-    SceneryInfoDispatcher,
-    SceneryInfoGeneral,
-    SceneryInfoIcons,
-    SceneryInfoAuthors,
-    SceneryInfoUserList,
-    SceneryInfoSpawnList,
-    SceneryInfoRoutes
+defineProps({
+  station: {
+    type: Object as PropType<Station>
   },
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    },
 
-    onlineScenery: {
-      type: Object as PropType<ActiveScenery>
-    }
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
   }
 });
 </script>
@@ -60,7 +54,15 @@ export default defineComponent({
 <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,51 +5,57 @@
     </div>
 
     <div v-else>
-      <span>
-        <b>{{ $t('availability.title') }}:</b>
-        {{ $t(`availability.${station.generalInfo.availability}`) }}
-
-        <span v-if="station.generalInfo.reqLevel > -1">
-          -
-          {{
-            $t(
-              'scenery.req-level',
-              { lvl: station.generalInfo.reqLevel },
-              station.generalInfo.reqLevel
-            )
-          }}
+      <div>
+        <span>
+          <b>{{ $t('scenery.abbrev') }}</b> {{ station.generalInfo.abbr }}
         </span>
-      </span>
 
-      <span>
-        &bull; <b>{{ $t('controls.title') }}:</b>
-        {{ $t(`controls.${station.generalInfo.controlType}`) }}
-      </span>
+        <span>
+          &bull; <b>{{ $t('availability.title') }}:</b>
+          {{ $t(`availability.${station.generalInfo.availability}`) }}
 
-      <span>
-        &bull; <b>{{ $t('signals.title') }}:</b>
-        {{ $t(`signals.${station.generalInfo.signalType}`) }}
-      </span>
+          <span v-if="station.generalInfo.reqLevel > -1">
+            -
+            {{
+              $t(
+                'scenery.req-level',
+                { lvl: station.generalInfo.reqLevel },
+                station.generalInfo.reqLevel
+              )
+            }}
+          </span>
+        </span>
 
-      <span v-if="station.generalInfo.lines">
-        &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
-      </span>
+        <span>
+          &bull; <b>{{ $t('controls.title') }}:</b>
+          {{ $t(`controls.${station.generalInfo.controlType}`) }}
+        </span>
 
-      <span v-if="station.generalInfo.project">
-        &bull; <b>{{ $t('scenery.project-title') }}: </b>
-        <a
-          style="color: salmon; text-decoration: underline; font-weight: bold"
-          :href="station.generalInfo.projectUrl"
-          target="_blank"
-        >
-          {{ station.generalInfo.project }}
-        </a>
-      </span>
+        <span>
+          &bull; <b>{{ $t('signals.title') }}:</b>
+          {{ $t(`signals.${station.generalInfo.signalType}`) }}
+        </span>
 
-      <span v-if="additionalTools.length != 0">
-        &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
-        {{ additionalTools.join(', ') }}
-      </span>
+        <span v-if="station.generalInfo.lines">
+          &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
+        </span>
+
+        <span v-if="station.generalInfo.project">
+          &bull; <b>{{ $t('scenery.project-title') }}: </b>
+          <a
+            style="color: salmon; text-decoration: underline; font-weight: bold"
+            :href="station.generalInfo.projectUrl"
+            target="_blank"
+          >
+            {{ station.generalInfo.project }}
+          </a>
+        </span>
+
+        <span v-if="additionalTools.length != 0">
+          &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
+          {{ additionalTools.join(', ') }}
+        </span>
+      </div>
     </div>
   </section>
 </template>
@@ -84,9 +90,9 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+}
 
-  div {
-    margin: 0 0.15em;
-  }
+.scenery-abbrev {
+  font-size: 1.05em;
 }
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -1,102 +1,101 @@
 <template>
-  <section class="info-icons">
-    <span v-if="!station || !station.generalInfo">
+  <section class="info-icons-section">
+    <div class="icons-box">
+      <span v-if="!station || !station.generalInfo">
+        <img
+          class="icon-info"
+          src="/images/icon-unknown.svg"
+          alt="icon-unknown"
+          :title="$t('sceneries.info.unknown')"
+        />
+      </span>
+
+      <span
+        v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
+        class="scenery-icon icon-info level"
+        :style="calculateExpStyles(station?.generalInfo.reqLevel)"
+      >
+        {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
+      </span>
+
       <img
+        v-if="station?.generalInfo?.availability == 'nonPublic'"
         class="icon-info"
-        src="/images/icon-unknown.svg"
-        alt="icon-unknown"
-        :title="$t('sceneries.info.unknown')"
+        src="/images/icon-lock.svg"
+        alt="Non-public scenery"
+        :title="$t('sceneries.info.non-public')"
       />
-    </span>
 
-    <span
-      v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
-      class="scenery-icon icon-info level"
-      :style="calculateExpStyle(station?.generalInfo.reqLevel)"
-    >
-      {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
-    </span>
+      <img
+        v-if="station?.generalInfo?.availability == 'unavailable'"
+        class="icon-info"
+        src="/images/icon-unavailable.svg"
+        alt="Unavailable scenery"
+        :title="$t('sceneries.info.unavailable')"
+      />
 
-    <img
-      v-if="station?.generalInfo?.availability == 'nonPublic'"
-      class="icon-info"
-      src="/images/icon-lock.svg"
-      alt="Non-public scenery"
-      :title="$t('sceneries.info.non-public')"
-    />
+      <img
+        v-if="station?.generalInfo?.availability == 'abandoned'"
+        class="icon-info"
+        src="/images/icon-abandoned.svg"
+        alt="Abandoned scenery"
+        :title="$t('sceneries.info.abandoned')"
+      />
 
-    <img
-      v-if="station?.generalInfo?.availability == 'unavailable'"
-      class="icon-info"
-      src="/images/icon-unavailable.svg"
-      alt="Unavailable scenery"
-      :title="$t('sceneries.info.unavailable')"
-    />
+      <span
+        v-if="station?.generalInfo"
+        class="scenery-icon icon-info"
+        :class="station?.generalInfo.controlType.replace('+', '-')"
+        :title="
+          $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
+        "
+      >
+        {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+      </span>
 
-    <img
-      v-if="station?.generalInfo?.availability == 'abandoned'"
-      class="icon-info"
-      src="/images/icon-abandoned.svg"
-      alt="Abandoned scenery"
-      :title="$t('sceneries.info.abandoned')"
-    />
+      <img
+        v-if="station?.generalInfo?.signalType"
+        class="icon-info"
+        :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+        :alt="station.generalInfo.signalType"
+        :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+      />
 
-    <span
-      v-if="station?.generalInfo"
-      class="scenery-icon icon-info"
-      :class="station?.generalInfo.controlType.replace('+', '-')"
-      :title="
-        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
-      "
-    >
-      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
-    </span>
+      <img
+        v-if="station?.generalInfo?.lines"
+        class="icon-info"
+        src="/images/icon-real.svg"
+        alt="real scenery"
+        :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
+      />
 
-    <img
-      v-if="station?.generalInfo?.signalType"
-      class="icon-info"
-      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-      :alt="station.generalInfo.signalType"
-      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-    />
+      <img
+        v-if="station?.generalInfo?.SUP"
+        class="icon-info"
+        src="/images/icon-SUP.svg"
+        alt="SUP (RASP-UZK)"
+        :title="$t('sceneries.info.SUP')"
+      />
 
-    <img
-      v-if="station?.generalInfo?.lines"
-      class="icon-info"
-      src="/images/icon-real.svg"
-      alt="real scenery"
-      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
-    />
-
-    <img
-      v-if="station?.generalInfo?.SUP"
-      class="icon-info"
-      src="/images/icon-SUP.svg"
-      alt="SUP (RASP-UZK)"
-      :title="$t('sceneries.info.SUP')"
-    />
-
-    <img
-      v-if="station?.generalInfo?.ASDEK"
-      class="icon-info"
-      src="/images/icon-ASDEK.svg"
-      alt="dSAT ASDEK"
-      :title="$t('sceneries.info.ASDEK')"
-    />
+      <img
+        v-if="station?.generalInfo?.ASDEK"
+        class="icon-info"
+        src="/images/icon-ASDEK.svg"
+        alt="dSAT ASDEK"
+        :title="$t('sceneries.info.ASDEK')"
+      />
+    </div>
   </section>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import styleMixin from '../../../mixins/styleMixin';
+<script lang="ts" setup>
+import { PropType } from 'vue';
 import { Station } from '../../../typings/common';
+import { calculateExpStyles } from '../../../composables/badge';
 
-export default defineComponent({
-  mixins: [styleMixin],
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    }
+defineProps({
+  station: {
+    type: Object as PropType<Station>
   }
 });
 </script>
@@ -104,12 +103,12 @@ export default defineComponent({
 <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 {