Enable lazy loading for language switch CSS

The CSS for the language switch is now set to load on demand using `loadedOnRequest()`. Additionally, the view is updated to dynamically load the required stylesheet using Alpine.js's `x-load-css` directive. This improves performance by reducing unnecessary asset loading.
bezhanSalleh · Dec 28, 2024 · 917527f · 917527f
1 parent 8f91b80
commit 917527f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/resources/views/language-switch.blade.php b/resources/views/language-switch.blade.php
@@ -14,7 +14,10 @@
     };
     $maxHeight = $languageSwitch->getMaxHeight();
 @endphp
-<div>
+<div
+    x-data
+    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('filament-language-switch', package: 'bezhansalleh/filament-language-switch'))]"
+>
     @if ($isVisibleOutsidePanels)
         <div @class([
             'fls-display-on fixed w-fit flex p-4 z-50',

diff --git a/src/FilamentLanguageSwitchServiceProvider.php b/src/FilamentLanguageSwitchServiceProvider.php
@@ -32,7 +32,7 @@ public function packageBooted(): void
 
         FilamentAsset::register(
             assets: [
-                Css::make('filament-language-switch', __DIR__ . '/../resources/dist/filament-language-switch.css'),
+                Css::make('filament-language-switch', __DIR__ . '/../resources/dist/filament-language-switch.css')->loadedOnRequest(),
             ],
             package: 'bezhansalleh/filament-language-switch'
         );