Merge branch '468-fix-loading-browse' into 'develop'

Resolve "Refreshing lists on browse page is causing the div to go down"

Closes #468

See merge request funkwhale/funkwhale!367

changes/changelog.d/468.bugfix

@@ -0,0 +1 @@
+Fix loading on browse page lists causing them to go down, and dimming over the top bar (#468)

front/src/App.vue

@@ -250,7 +250,7 @@ html, body {
     left: 350px;
     right: 0px;
     top: 0px;
-    z-index: 1;
+    z-index: 2000;
   }
   background-color: white;
   .item {

front/src/components/audio/track/Widget.vue

@@ -10,9 +10,6 @@
     <i @click="fetchData(url)" :class="['ui', 'circular', 'medium', 'refresh', 'icon']">
     </i>
     <div class="ui divided unstackable items">
-      <div v-if="isLoading" class="ui inverted active dimmer">
-        <div class="ui loader"></div>
-      </div>
       <div class="item" v-for="object in objects" :key="object.id">
         <div class="ui tiny image">
           <img v-if="object.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.medium_square_crop)">
@@ -45,6 +42,9 @@
           </div>
         </div>
       </div>
+      <div v-if="isLoading" class="ui inverted active dimmer">
+        <div class="ui loader"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -126,4 +126,7 @@ export default {
 .refresh.icon {
   float: right;
 }
+.ui.divided.items > .item:last-child {
+  padding-bottom: 1em !important;
+}
 </style>