From 6a4bbc301e3d8b4f027b9baa578fdcacc044cf62 Mon Sep 17 00:00:00 2001
From: brusnitsyn <brusnitsyn@gmail.com>
Date: Tue, 2 Jun 2026 14:23:51 +0900
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=B8=D0=BD=D0=B4=D0=B8=D0=BA=D0=B0=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/Components/AppPanel.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/AppPanel.vue b/resources/js/Components/AppPanel.vue
index b523e4a..a8eefd0 100644
--- a/resources/js/Components/AppPanel.vue
+++ b/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>