style(front): empty state layout in channel album cards

front/src/components/audio/ChannelSeries.vue

@@ -8,6 +8,8 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
 import AlbumCard from '~/components/audio/album/Card.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
 
 interface Props {
@@ -55,15 +57,9 @@ fetchData()
 </script>
 
 <template>
-  <div>
-    <slot />
-    <div class="ui hidden divider" />
-    <div
-      v-if="isLoading"
-      class="ui inverted active dimmer"
-    >
-      <div class="ui loader" />
-    </div>
+  <slot />
+  <Layout flex>
+    <Loader v-if="isLoading" />
     <template v-if="isPodcast">
       <channel-serie-card
         v-for="serie in albums"
@@ -71,25 +67,23 @@ fetchData()
         :serie="serie"
       />
     </template>
-    <div
-      v-else
-      class="ui app-cards cards"
-    >
+    <template v-else>
       <album-card
         v-for="album in albums"
         :key="album.id"
         :album="album"
       />
-    </div>
+    </template>
     <template v-if="nextPage">
-      <div class="ui hidden divider" />
       <Button
+        secondary
         v-if="nextPage"
         @click="fetchData(nextPage)"
       >
         {{ t('components.audio.ChannelSeries.button.showMore') }}
       </Button>
     </template>
+  </Layout>
     <template v-if="!isLoading && albums.length === 0">
       <empty-state
         :refresh="true"
@@ -100,5 +94,4 @@ fetchData()
         </p>
       </empty-state>
     </template>
-  </div>
 </template>