fix(loading): add minimum height to settings loader

Author: dvcol

src/components/common/loading/PageLoading.vue

@@ -2,10 +2,22 @@
 import { NIcon } from 'naive-ui';
 
 import IconLoadingMatrix from '~/components/icons/IconLoadingMatrix.vue';
+
+defineProps({
+  size: {
+    type: String,
+    required: false,
+    default: '3rem',
+  },
+  minHeight: {
+    type: String,
+    required: false,
+  },
+});
 </script>
 
 <template>
-  <NIcon class="loading-container" size="3rem">
+  <NIcon class="loading-container" :style="{ '--min-height': minHeight }" :size="size">
     <IconLoadingMatrix />
   </NIcon>
 </template>
@@ -19,6 +31,7 @@ import IconLoadingMatrix from '~/components/icons/IconLoadingMatrix.vue';
   justify-content: center;
   width: 100%;
   height: 100%;
+  min-height: var(--min-height, 0);
   padding-bottom: layout.$header-navbar-height;
   opacity: 1;
   transition: opacity 1s ease-in 0.2s;

src/components/views/settings/SettingsComponent.vue

@@ -145,7 +145,10 @@ onDeactivated(() => {
           :ref="section.reference"
           class="card"
           :class="{ target: focus?.title === section.title }"
-          :style="{ '--length': sections.length, '--index': index }"
+          :style="{
+            '--length': sections.length,
+            '--index': index,
+          }"
           :title="i18n(section.title)"
           @mouseenter="onEnter(section)"
           @mouseleave="onLeave(section)"
@@ -155,7 +158,7 @@ onDeactivated(() => {
           <Suspense>
             <component :is="section.component" />
             <template #fallback>
-              <PageLoading />
+              <PageLoading min-height="var(--height-40-dvh)" />
             </template>
           </Suspense>
         </NCard>

src/utils/calendar.utils.ts

@@ -134,10 +134,14 @@ export const useCalendar = ({
   list,
   centerItem,
   fetchData,
+  itemSize = 145,
+  placeholders = 1,
 }: {
   list: Ref<ListScrollItem[]>;
   centerItem: Ref<ListScrollItem | undefined>;
   fetchData: (mode?: 'start' | 'end' | 'reload') => Promise<unknown>;
+  itemSize?: number;
+  placeholders?: number;
 }) => {
   const listRef = ref<{ list: VirtualListRef }>();
   const scrollTo = (options?: VirtualListScrollToOptions, index = centerItem.value?.index) => {
@@ -169,14 +173,14 @@ export const useCalendar = ({
     let placeholder = 0;
     const timeout = setTimeout(() => {
       listRef.value?.list.scrollTo({ top: 145 });
-      placeholder = 1;
+      placeholder = placeholders;
     }, defaultDebounceLoadingDelay); // default debounceLoading delay
 
     await fetching;
 
     clearTimeout(timeout);
     listRef.value?.list.scrollTo({
-      top: (list.value.findIndex(item => item.id === first.id) - placeholder) * 145,
+      top: (list.value.findIndex(item => item.id === first.id) - placeholder) * itemSize,
     });
     placeholder = 0;
   };