Добавлен лоадер при открытии модальных окон

resources/js/Pages/Home/ArchiveHistoryModal/Index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { NModal, NDataTable, NSpace, NFlex, NButton, NForm, NFormItem, NInput, NDatePicker, NDivider, NSwitch, NTag } from 'naive-ui'
+import { NModal, NDataTable, NSpace, NFlex, NButton, NForm, NFormItem, NInput, NDatePicker, NDivider, NSpin, NTag } from 'naive-ui'
 import ArchiveHistoryMoveModal from '../ArchiveHistoryMoveModal/Index.vue'
 import {computed, ref, watch} from "vue";
 import {useMedicalHistoryFilter} from "../../../Composables/useMedicalHistoryFilter.js";
@@ -156,7 +156,7 @@ watch(() => props.patientId, async (newId) => {
 </script>
 
 <template>
-    <NModal v-model:show="open" preset="card" class="max-w-4xl" closable @close="onCloseWithoutSave">
+    <NModal v-model:show="open" preset="card" class="max-w-4xl relative" closable @close="onCloseWithoutSave">
         <template #header>
             {{ patient.info?.medcardnum }} {{ patient.info?.family }} {{ patient.info?.name }} {{ patient.info?.ot }}
         </template>
@@ -194,6 +194,10 @@ watch(() => props.patientId, async (newId) => {
                 </NSpace>
             </NFlex>
         </template>
+
+        <div v-show="loading" class="absolute inset-0 z-10 bg-white flex items-center justify-center">
+            <NSpin :show="true" />
+        </div>
     </NModal>
     <ArchiveHistoryMoveModal @history-updated="onUpdateHistory" @close-without-save="selectedArchiveHistoryId = null" :is-create-new="isCreateNewArchiveHistoryModal" v-model:open="showArchiveHistoryModal" :active-history-type="selectedArchiveHistoryType" :archive-history-id="selectedArchiveHistoryId" />
 </template>

resources/js/Pages/Home/ArchiveHistoryMoveModal/Index.vue

@@ -1,5 +1,18 @@
 <script setup>
-import {NButton, NDatePicker, NDivider, NFlex, NForm, NFormItem, NInput, NModal, NSpace, NSwitch, NSelect} from "naive-ui";
+import {
+    NButton,
+    NDatePicker,
+    NDivider,
+    NFlex,
+    NForm,
+    NFormItem,
+    NInput,
+    NModal,
+    NSpace,
+    NSwitch,
+    NSelect,
+    NSpin
+} from "naive-ui";
 import {ref, watch} from "vue";
 import {router} from "@inertiajs/vue3";
 const open = defineModel('open')
@@ -99,7 +112,7 @@ watch(() => props.archiveHistoryId, async (newId) => {
 </script>
 
 <template>
-    <NModal v-model:show="open" preset="card" class="max-w-2xl" closable @close="onCloseWithoutSave">
+    <NModal v-model:show="open" preset="card" class="max-w-2xl relative" closable @close="onCloseWithoutSave">
         <template #header>
             {{ archiveHistoryId === null ? 'Добавить' : 'Редактировать' }} запись выдачи
         </template>
@@ -140,6 +153,10 @@ watch(() => props.archiveHistoryId, async (newId) => {
                 </NSpace>
             </NFlex>
         </template>
+
+        <div v-show="loading" class="absolute inset-0 z-10 bg-white flex items-center justify-center">
+            <NSpin :show="true" />
+        </div>
     </NModal>
 </template>