refactor(front): Libraries on profile detail

front/src/components/federation/LibraryWidget.vue

@@ -9,6 +9,9 @@ import axios from 'axios'
 
 import LibraryCard from '~/views/content/remote/Card.vue'
 import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -73,13 +76,8 @@ fetchData()
       {{ t('components.federation.LibraryWidget.empty.noMatch') }}
     </p>
     <div class="ui hidden divider" />
-    <div class="ui cards">
-      <div
-        v-if="isLoading"
-        class="ui inverted active dimmer"
-      >
-        <div class="ui loader" />
-      </div>
+    <Layout flex>
+      <Loader v-if="isLoading" />
       <library-card
         v-for="library in libraries"
         :key="library.uuid"
@@ -88,11 +86,12 @@ fetchData()
         :initial-library="library"
         :display-copy-fid="true"
       />
-    </div>
+    </Layout>
     <template v-if="nextPage">
-      <div class="ui hidden divider" />
+      <Spacer />
       <Button
         v-if="nextPage"
+        primary
         @click="fetchData(nextPage)"
       >
         {{ t('components.federation.LibraryWidget.button.showMore') }}