fix(panel): adds loading support & fix scrollbar

Author: dvcol

src/components/AppComponent.vue

@@ -78,7 +78,7 @@ const onBack = () => {
           :on-after-leave="onAfterLeave"
           auto-focus
         >
-          <NDrawerContent>
+          <NDrawerContent :native-scrollbar="false">
             <!--  Header  -->
             <NFlex justify="space-between" class="panel-header">
               <NButton circle quaternary @click="onBack">
@@ -150,7 +150,7 @@ main {
 
   &-header {
     position: sticky;
-    top: 0;
+    top: 1rem;
   }
 
   &-content {

src/components/views/panel/PanelButtonProgress.vue

@@ -43,6 +43,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+  },
 
   icon: {
     type: Object as PropType<Component>,
@@ -134,7 +138,7 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
         :to="root"
         :render-label="renderLabel"
         trigger="focus"
-        :disabled="disabled"
+        :disabled="disabled || loading"
         v-bind="select"
         :on-update:show="_show => !_show && trigger?.$el?.blur()"
         :on-update-value="onSelect"
@@ -146,6 +150,7 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
           round
           :secondary="!filled"
           :disabled="disabled"
+          :loading="loading"
           :type="type"
         >
           <template #icon>
@@ -157,6 +162,7 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
     </ProgressTooltip>
 
     <NModal
+      v-if="false"
       v-model:show="showPicker"
       :to="root"
       :style="{

src/components/views/panel/ShowPanelButtons.vue

@@ -169,7 +169,7 @@ onMounted(() => {
         }"
         :icon="activeLists?.length ? IconCheckedList : IconListEmpty"
         :filled="!!activeLists?.length"
-        :disabled="listsLoading"
+        :loading="listsLoading"
         type="warning"
         @on-select="onListUpdate"
       >
@@ -197,7 +197,7 @@ onMounted(() => {
         :progress="collectionProgress"
         :percentage="collectionPercentage"
         :filled="collected"
-        :disabled="collectionLoading"
+        :loading="collectionLoading"
         type="info"
         @on-select="onCollectionUpdate"
       >
@@ -218,7 +218,7 @@ onMounted(() => {
         :progress="watchedProgress"
         :percentage="watchedPercentage"
         :filled="watched"
-        :disabled="watchedLoading"
+        :loading="watchedLoading"
         @on-select="onWatchedUpdate"
       >
         {{ i18n(`label__history__${ watched ? 'remove' : 'add' }`) }}