Let the home-view components load data by themselves

src/components/Home/HomeView.vue

@@ -2,15 +2,16 @@
   <h1>/ {{ $t("home.title") }}</h1>
   <h3>{{ $t("home.recent_albums_title") }}</h3>
   <div class="list scrollbar">
-    <AlbumListItem :album="album" v-for="album in recentAlbums" :key="album.getId()" />
+    <AlbumListItem v-if="recentAlbums !== null" :album="album" v-for="album in recentAlbums" :key="album.getId()" />
+    <LoadingIcon v-else />
   </div>
   <div class="grid">
     <div>
-      <PlaybackHistory :items="playbackHistory" />
+      <PlaybackHistory />
     </div>
     <div>
-      <GenreStatistics :items="genreStatistics" />
-      <MostPlayed :items="mostPlayed" />
+      <GenreStatistics />
+      <MostPlayed />
     </div>
   </div>
 </template>
@@ -21,39 +22,29 @@ import { plainToInstance } from 'class-transformer'
 import { defineComponent } from 'vue'
 import Album from '../../model/Album'
 import AlbumListItem from '../Album/Lib/AlbumListItem.vue'
-import PlaybackHistoryItem from '../../model/PlaybackHistoryItem'
-import PlaybackHistoryItemInterface from '../../model/PlaybackHistoryItemInterface'
-import MostPlayedItem from '../../model/MostPlayedItem'
-import MostPlayedItemInterface from '../../model/MostPlayedItemInterface'
 import HttpRequest from '../Lib/HttpRequest'
 import AlbumInterface from '../../model/AlbumInterface'
 import PlaybackHistory from '../Lib/PlaybackHistory.vue'
 import MostPlayed from '../Lib/MostPlayed.vue'
-import GenreStatisticItemInterface from '../../model/GenreStatisticItemInterface'
-import GenreStatisticItem from '../../model/GenreStatisticItem'
 import GenreStatistics from './Lib/GenreStatistics.vue'
+import LoadingIcon from "@/components/Lib/LoadingIcon.vue";
 
 export default defineComponent({
   name: 'HomeView',
   data() {
     return { 
-      recentAlbums: [] as Array<AlbumInterface>,
-      playbackHistory: [] as Array<PlaybackHistoryItemInterface>,
-      mostPlayed: [] as Array<MostPlayedItemInterface>,
-      genreStatistics: [] as Array<GenreStatisticItemInterface>,
+      recentAlbums: null as null|Array<AlbumInterface>,
     }
   },
   components: {
+    LoadingIcon,
     AlbumListItem,
     PlaybackHistory,
     MostPlayed,
     GenreStatistics
-},
+  },
   beforeMount(): void {
     this.getNewestAlbums()
-    this.getPlaybackHistory()
-    this.getMostPlayed()
-    this.getGenreStatistics()
   },
   methods: {
     async getNewestAlbums(): Promise<void> {
@@ -63,27 +54,6 @@ export default defineComponent({
         });
       });
     },
-    async getPlaybackHistory(): Promise<void> {
-      HttpRequest.get('play/history').then((response: AxiosResponse) => {
-        this.playbackHistory = response.data.items.map((historyData: Object): PlaybackHistoryItemInterface => {
-          return plainToInstance(PlaybackHistoryItem, historyData);
-        })
-      })
-    },
-    async getMostPlayed(): Promise<void> {
-      HttpRequest.get('play/mostplayed').then((response: AxiosResponse) => {
-        this.mostPlayed = response.data.items.map((data: Object): MostPlayedItemInterface => {
-          return plainToInstance(MostPlayedItem, data);
-        })
-      })
-    },
-    async getGenreStatistics(): Promise<void> {
-      HttpRequest.get('genres').then((response: AxiosResponse) => {
-        this.genreStatistics = response.data.items.map((data: Object): GenreStatisticItemInterface => {
-          return plainToInstance(GenreStatisticItem, data);
-        })
-      })
-    },
   }
 })
 </script>

src/components/Home/Lib/GenreStatistics.vue

@@ -1,26 +1,46 @@
 <template>
   <h3>{{ $t("home.genre_statistics.title") }}</h3>
-  <div class="genres">
+  <div class="genres" v-if="items !== null">
     <router-link :key="genre.getId()" v-for="genre in items" :to="'/albums/genre/' + genre.getId()">
       <span :title="$t('home.genre_statistics.albumCount', {albumCount: genre.getAlbumCount()})">{{ genre.getName() }}</span>
     </router-link>
   </div>
+  <div class="genres" v-else>
+    <LoadingIcon />
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent } from 'vue'
 import GenreStatisticItemInterface from '../../../model/GenreStatisticItemInterface'
+import {AxiosResponse} from "axios";
+import {plainToInstance} from "class-transformer";
+import GenreStatisticItem from '../../../model/GenreStatisticItem'
+import HttpRequest from '../../Lib/HttpRequest'
+import LoadingIcon from "@/components/Lib/LoadingIcon.vue";
 
 export default defineComponent({
   name: 'GenreStatistics',
-  props: {
-    items: {
-      type: Array as PropType<Array<GenreStatisticItemInterface>>,
-      required: true
+  data() {
+    return {
+      items: null as null|Array<GenreStatisticItemInterface>,
     }
   },
   components: {
+    LoadingIcon
+  },
+  beforeMount(): void {
+    this.getGenreStatistics()
   },
+  methods: {
+    async getGenreStatistics(): Promise<void> {
+      HttpRequest.get('genres').then((response: AxiosResponse) => {
+        this.items = response.data.items.map((data: Object): GenreStatisticItemInterface => {
+          return plainToInstance(GenreStatisticItem, data);
+        })
+      })
+    },
+  }
 })
 </script>
 

src/components/Lib/MostPlayed.vue

@@ -8,7 +8,7 @@
         <th>{{ $t('home.most_played.table.column.number_played') }}</th>
       </tr>
     </thead>
-    <tbody>
+    <tbody v-if="items !== null">
       <tr v-for="item in items" :key="item.getSong().getId()">
         <td>
           <SongCover :song="item.getSong()" :size="'40'" />
@@ -24,27 +24,51 @@
         <td>{{ item.getCount() }}</td>
       </tr>
     </tbody>
+    <tbody v-else>
+    <tr>
+      <td colspan="3">
+        <LoadingIcon />
+      </td>
+    </tr>
+    </tbody>
   </table>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent } from 'vue'
 import MostPlayedItemInterface from '../../model/MostPlayedItemInterface'
 import PlaySongButton from './PlaySongButton.vue'
 import SongCover from '../Lib/SongCover.vue'
+import HttpRequest from '../Lib/HttpRequest'
+import {AxiosResponse} from "axios";
+import {plainToInstance} from "class-transformer";
+import MostPlayedItem from '../../model/MostPlayedItem'
+import LoadingIcon from "@/components/Lib/LoadingIcon.vue";
 
 export default defineComponent({
   name: 'MostPlayed',
-  props: {
-    items: {
-      type: Array as PropType<Array<MostPlayedItemInterface>>,
-      required: true
+  data() {
+    return {
+      items: null as null|Array<MostPlayedItemInterface>,
     }
   },
   components: {
+    LoadingIcon,
     PlaySongButton,
     SongCover,
   },
+  beforeMount(): void {
+    this.getMostPlayed()
+  },
+  methods: {
+    async getMostPlayed(): Promise<void> {
+      HttpRequest.get('play/mostplayed').then((response: AxiosResponse) => {
+        this.items = response.data.items.map((data: Object): MostPlayedItemInterface => {
+          return plainToInstance(MostPlayedItem, data);
+        })
+      })
+    },
+  }
 })
 </script>
 

src/components/Lib/PlaybackHistory.vue

@@ -8,7 +8,7 @@
         <th>{{ $t("home.playback_history.table.user_column_title") }}</th>
       </tr>
     </thead>
-    <tbody>
+    <tbody v-if="items !== null">
       <tr v-for="song in items" :key="song.getId()">
         <td>
           <SongCover :song="song" :size="'40'" />
@@ -24,27 +24,51 @@
         <td>{{ song.getUserName() }}</td>
       </tr>
     </tbody>
+    <tbody v-else>
+      <tr>
+        <td colspan="3">
+          <LoadingIcon />
+        </td>
+      </tr>
+    </tbody>
   </table>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent } from 'vue'
 import PlaybackHistoryItemInterface from '../../model/PlaybackHistoryItemInterface'
+import PlaybackHistoryItem from '../../model/PlaybackHistoryItem'
 import PlaySongButton from '../Lib/PlaySongButton.vue'
 import SongCover from '../Lib/SongCover.vue'
+import LoadingIcon from "@/components/Lib/LoadingIcon.vue";
+import HttpRequest from '../Lib/HttpRequest'
+import {AxiosResponse} from "axios";
+import {plainToInstance} from "class-transformer";
 
 export default defineComponent({
   name: 'PlaybackHistory',
-  props: {
-    items: {
-      type: Array as PropType<Array<PlaybackHistoryItemInterface>>,
-      required: true
+  data() {
+    return {
+      items: null as null|Array<PlaybackHistoryItemInterface>,
     }
   },
   components: {
+    LoadingIcon,
     PlaySongButton,
     SongCover,
   },
+  beforeMount() {
+      this.getPlaybackHistory();
+  },
+  methods: {
+    async getPlaybackHistory(): Promise<void> {
+      HttpRequest.get('play/history').then((response: AxiosResponse) => {
+        this.items = response.data.items.map((historyData: Object): PlaybackHistoryItemInterface => {
+          return plainToInstance(PlaybackHistoryItem, historyData);
+        })
+      })
+    },
+  }
 })
 </script>