Добавлен индикатор загрузки

resources/js/Components/AppPanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { NFormItem, NCard, NScrollbar } from 'naive-ui'
+import { NFormItem, NCard, NScrollbar, NEl, NSpin } from 'naive-ui'
 import {computed, ref, watch} from "vue";
 const props = defineProps({
     header: {
@@ -25,6 +25,10 @@ const props = defineProps({
     noPadding: {
         type: Boolean,
         default: false
+    },
+    loading: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -61,7 +65,7 @@ watch(() => [props.minH, props.maxH], ([minH, maxH]) => {
 
 <template>
     <NFormItem :show-label="hasHeaderInOutside" :label="header" :show-feedback="hasFeedback" :feedback="feedback">
-        <NCard v-bind="$attrs" :class="noPadding ? 'no-padding h-full' : 'h-full'">
+        <NCard v-bind="$attrs" :class="noPadding ? 'no-padding h-full relative' : 'h-full relative'">
             <template v-if="!hasHeaderInOutside && header" #header>
                 {{ header }}
             </template>
@@ -71,6 +75,13 @@ watch(() => [props.minH, props.maxH], ([minH, maxH]) => {
             <NScrollbar :style="styles">
                 <slot />
             </NScrollbar>
+
+            <div v-if="loading"
+                 class="absolute inset-0 z-10" style="background-color: color-mix(in srgb, var(--n-color-popover) 20%, transparent)">
+                <div class="flex flex-col justify-center items-center h-full">
+                    <NSpin size="small" />
+                </div>
+            </div>
         </NCard>
     </NFormItem>
 </template>