Fix sidebar persistence

Author: adamwhp

resources/js/Components/UI/Button.tsx

@@ -33,7 +33,7 @@ const buttonVariants = cva(
   }
 )
 
-const loadingSpinnerVariants = cva('', {
+const loadingSpinnerVariants = cva('ml-2 -mr-2', {
   variants: {
     variant: {
       default: 'text-primary-foreground',
@@ -69,23 +69,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={loading}
         {...props}
       >
-        <span
-          className={cn(
-            loading ? 'scale-100 opacity-100' : 'scale-50 opacity-0',
-            'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out'
-          )}
-        >
-          <LoadingSpinner className={loadingSpinnerVariants({ variant })} />
-        </span>
-
-        <span
-          className={cn(
-            loading ? 'scale-95 opacity-0' : 'scale-100 opacity-100',
-            'inline-flex transition-all duration-300 ease-out'
-          )}
-        >
-          {children}
-        </span>
+        {children}
+        {loading && <LoadingSpinner className={loadingSpinnerVariants({ variant })} />}
       </Comp>
     )
   }

resources/js/Layouts/AuthenticatedLayout.tsx

@@ -3,7 +3,7 @@ import { AppSidebar } from '@/Components/AppSidebar'
 import { MobileHeader } from '@/Components/MobileHeader'
 import { PageBreadcrumbs } from '@/Components/PageBreadcrumbs'
 import { Separator } from '@/Components/UI/Separator'
-import { SidebarProvider, SidebarTrigger } from '@/Components/UI/Sidebar'
+import { SidebarTrigger } from '@/Components/UI/Sidebar'
 import { PropsWithChildren } from 'react'
 
 export function AuthenticatedLayout({
@@ -15,26 +15,24 @@ export function AuthenticatedLayout({
   const Breadcrumbs = breadcrumbs ?? PageBreadcrumbs
 
   return (
-    <SidebarProvider>
-      <div className="flex h-full w-full flex-col lg:flex-row">
-        <MobileHeader />
+    <div className="flex h-full w-full flex-col lg:flex-row">
+      <MobileHeader />
 
-        <AppSidebar />
+      <AppSidebar />
 
-        <div className="flex min-h-dvh grow flex-col justify-between overflow-hidden border-t lg:border-t-0">
-          <main className="lg:pt-14">
-            <header className="top-0 z-10 flex h-14 w-full items-center gap-2 border-b bg-muted px-4 backdrop-blur-sm sm:px-6 lg:fixed lg:bg-background/80 lg:px-8">
-              <SidebarTrigger className="-ml-6 hidden lg:flex" />
-              <Separator orientation="vertical" className="mr-3 hidden h-4 lg:block" />
-              <Breadcrumbs />
-            </header>
+      <div className="flex min-h-dvh grow flex-col justify-between overflow-hidden border-t lg:border-t-0">
+        <main className="lg:pt-14">
+          <header className="top-0 z-10 flex h-14 w-full items-center gap-2 border-b bg-muted px-4 backdrop-blur-sm sm:px-6 lg:fixed lg:bg-background/80 lg:px-8">
+            <SidebarTrigger className="-ml-6 hidden lg:flex" />
+            <Separator orientation="vertical" className="mr-3 hidden h-4 lg:block" />
+            <Breadcrumbs />
+          </header>
 
-            <div className="overflow-y-auto px-4 py-10 sm:px-6 lg:px-8">{children}</div>
-          </main>
+          <div className="overflow-y-auto px-4 py-10 sm:px-6 lg:px-8">{children}</div>
+        </main>
 
-          <AppFooter />
-        </div>
+        <AppFooter />
       </div>
-    </SidebarProvider>
+    </div>
   )
 }

resources/js/app.tsx

@@ -1,4 +1,5 @@
 import { DarkModeProvider } from '@/Components/Providers/DarkModeProvider'
+import { SidebarProvider } from '@/Components/UI/Sidebar'
 import { DefaultLayout } from '@/Layouts/DefaultLayout'
 import { createInertiaApp } from '@inertiajs/react'
 import { LaravelReactI18nProvider } from 'laravel-react-i18n'
@@ -28,7 +29,9 @@ createInertiaApp({
     createRoot(el).render(
       <LaravelReactI18nProvider files={import.meta.glob('/lang/*.json')}>
         <DarkModeProvider>
-          <App {...props} />
+          <SidebarProvider>
+            <App {...props} />
+          </SidebarProvider>
         </DarkModeProvider>
       </LaravelReactI18nProvider>
     )