Performance Optimization: On-Demand CSS Loading for Language Switcher

[n4ss1m]

Changes Made

• Implemented conditional loading of language switcher CSS using loadedOnRequest()
• Added dynamic stylesheet loading via Alpine.js's x-load-css directive
• Prevents loading of /css/bezhansalleh/filament-language-switch/filament-language-switch.css on pages where the language switcher isn't used

Technical Details

The core change utilizes Filament's loadedOnRequest() method, which ensures assets are only loaded when the component is actually rendered on the page. This replaces the previous behavior where the stylesheet was loaded globally across all pages.

Impact

• Reduced unnecessary asset loading
• Improved page load performance
• Optimized bandwidth usage

Reference

https://filamentphp.com/docs/3.x/support/plugins/build-a-standalone-plugin#step-3-setting-up-the-provider
https://filamentphp.com/docs/3.x/support/plugins/build-a-standalone-plugin#step-5-rendering-our-component

[what-the-diff]

PR Summary

• Updated UI component for enhanced efficiency
  The 'language-switch.blade.php' file, which is a key part of our interface, has been updated. It now includes some additional instructions for loading stylesheets, known as Alpine.js directives. This will make the content appear more immersive and visually appealing to users.

• Improved CSS loading for performance boost
  Our method to register (or load) style formats, technically known as CSS, in the 'FilamentLanguageSwitchServiceProvider.php' file, has been improved. Instead of loading them directly (which used to be heavy on resources), we've adopted a new 'lazy loading' approach. This will allow the styles to load only when requested, leading to faster page loading and better overall performance.