modified: .gitignore

resources/js/Layouts/AppLayout.vue

@@ -1,7 +1,10 @@
 <script setup>
-import {NLayout, NLayoutSider, NConfigProvider, NLayoutHeader, ruRU, dateRuRU, darkTheme} from "naive-ui";
+import {NLayout, NLayoutSider, NConfigProvider, NLayoutHeader, ruRU, dateRuRU, darkTheme, NEl, NAlert, NSpin, NText} from "naive-ui";
 import SideMenu from "./Components/SideMenu.vue";
 import AppHeader from "./Components/AppHeader.vue";
+import {useGlobalLoading} from "../Composables/useGlobalLoading.js";
+
+const {isGlobalLoading} = useGlobalLoading()
 
 const themeOverrides = {
     Modal: {
@@ -33,7 +36,46 @@ const themeOverrides = {
                 </AppHeader>
             </NLayoutHeader>
 
-            <NLayout has-sider position="absolute" class="top-12!" content-class="relative" :native-scrollbar="false">
+            <Transition name="wait-alert">
+                <NEl
+                    v-if="isGlobalLoading"
+                    class="wait-layer pointer-events-none fixed inset-x-0 top-[56px] z-[2600] flex justify-center px-3"
+                >
+                    <NAlert
+                        type="info"
+                        :show-icon="false"
+                        class="wait-banner w-full max-w-md"
+                        style="
+                            --n-color: color-mix(in oklch, var(--info-color) 12%, transparent);
+                            --n-border: 1px solid color-mix(in oklch, var(--info-color) 36%, transparent);
+                        "
+                    >
+                        <div class="flex items-center justify-center gap-2.5 text-[13px] leading-none">
+                            <NSpin :size="14" />
+                            <NText depth="1" class="tracking-[0.1px]">Подождите, загружаем данные…</NText>
+                        </div>
+                    </NAlert>
+                </NEl>
+            </Transition>
+
+            <NEl class="pointer-events-none fixed inset-x-0 top-12 bottom-0 overflow-hidden z-0">
+                <div class="absolute inset-x-0 top-[-12rem] mx-auto h-80 w-80 rounded-full blur-3xl"
+                     style="background: color-mix(in oklch, var(--primary-color) 22%, transparent);" />
+                <div class="absolute right-[-8rem] top-48 h-72 w-72 rounded-full blur-3xl"
+                     style="background: color-mix(in oklch, var(--warning-color) 28%, transparent);" />
+                <div class="absolute left-[-10rem] bottom-10 h-80 w-80 rounded-full blur-3xl"
+                     style="background: color-mix(in oklch, var(--info-color) 24%, transparent);" />
+                <div class="grid-overlay absolute inset-0 opacity-65" />
+            </NEl>
+
+            <NLayout
+                has-sider
+                position="absolute"
+                class="top-12! bottom-0! relative overflow-hidden z-10"
+                content-class="relative z-10"
+                :native-scrollbar="false"
+                style="--n-color: transparent;"
+            >
 <!--                <NLayoutSider-->
 <!--                    :native-scrollbar="false"-->
 <!--                    width="290"-->
@@ -42,7 +84,7 @@ const themeOverrides = {
 <!--                    <SideMenu />-->
 <!--                </NLayoutSider>-->
 
-                <NLayout>
+                <NLayout style="--n-color: transparent;">
                     <div>
                         <slot name="header" />
                     </div>
@@ -55,5 +97,36 @@ const themeOverrides = {
 </template>
 
 <style scoped>
+.wait-alert-enter-active,
+.wait-alert-leave-active {
+    transition: all 0.2s ease;
+}
 
+.wait-alert-enter-from,
+.wait-alert-leave-to {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+
+.wait-banner {
+    box-shadow:
+        0 10px 24px -18px color-mix(in oklch, var(--info-color) 55%, transparent),
+        0 4px 12px -10px rgb(0 0 0 / 55%);
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+}
+
+:deep(.wait-banner .n-alert-body) {
+    padding: 8px 12px;
+}
+
+:deep(.wait-banner .n-spin-body) {
+    width: 14px;
+    height: 14px;
+}
+
+/* If a modal is open, keep loading alert in modal visual context (not behind it). */
+:global(body:has(.n-modal-container)) .wait-layer {
+    top: 24px;
+}
 </style>

resources/js/Layouts/Components/AppUserButton.vue

@@ -2,7 +2,7 @@
 import {useAuthStore} from "../../Stores/auth.js";
 import {NSelect, NFlex, NText} from 'naive-ui'
 import {computed} from "vue";
-import {router, useForm} from "@inertiajs/vue3";
+import {useForm} from "@inertiajs/vue3";
 
 const authStore = useAuthStore()
 const userOptions = computed(() => {
@@ -18,15 +18,7 @@ const formRole = useForm({
     role_id: authStore.user.role?.role_id
 })
 const onChangeRole = (roleId) => {
-    formRole.post('/user/role/change', {
-        onSuccess: () => {
-            router.visit(window.location.pathname, {
-                preserveScroll: true,
-                preserveState: false, // Это важно - сбрасывает состояние
-                only: ['user', 'auth'], // Указываем какие данные обновить
-            })
-        }
-    })
+    formRole.post('/user/role/change')
 }
 
 const themeOverride = {