Eliminando `getOptionLabelsUsing()` para una mejor experiencia de usuario en landing
En el proyecto landing, nos encontramos constantemente optimizando la experiencia del usuario y la eficiencia del código. Recientemente, identificamos un método que, aunque bien intencionado, estaba impactando negativamente el rendimiento y la usabilidad de los selectores: getOptionLabelsUsing().
El Problema
El método getOptionLabelsUsing() tenía la función de precargar y mostrar las etiquetas de las opciones en los selectores. Sin embargo, también disparaba el modo de búsqueda AJAX de Filament. Esto generaba dos problemas:
- Sobrecarga del servidor: Cada interacción con el selector resultaba en una petición AJAX, incluso para opciones que ya estaban disponibles en el cliente.
- Experiencia de usuario inconsistente: El comportamiento de búsqueda AJAX interfería con la capacidad de filtrar las opciones localmente.
La Solución
La solución fue eliminar getOptionLabelsUsing() y confiar en la combinación de options() y searchable():
options(): Este método precarga todas las opciones en el cliente.searchable(): Este método permite filtrar las opciones localmente en el navegador.
Este enfoque ofrece varias ventajas:
- Menos peticiones al servidor: La búsqueda se realiza localmente, reduciendo la carga en el servidor.
- Mejor experiencia de usuario: Los usuarios pueden filtrar rápidamente las opciones sin esperar respuestas del servidor.
- Código más limpio y predecible: Se elimina la lógica compleja de
getOptionLabelsUsing(), simplificando el mantenimiento y la depuración.
Ejemplo de Implementación
Consideremos un ejemplo donde necesitamos mostrar una lista de roles de usuario en un selector. Anteriormente, podríamos haber usado getOptionLabelsUsing() para cargar los nombres de los roles. Ahora, podemos usar options() y searchable() de la siguiente manera:
use App\Models\Role;
// En el Form Object o Livewire Component
'role_id' => Select::make('Rol')
->options(Role::all()->pluck('name', 'id'))
->searchable(),
En este ejemplo:
Role::all()->pluck('name', 'id')carga todos los roles desde la base de datos y los formatea como un array asociativo [id => nombre].searchable()habilita la búsqueda local en el selector.
Conclusión
Eliminar getOptionLabelsUsing() y adoptar options() + searchable() resultó en una mejora significativa en el rendimiento y la experiencia del usuario en los selectores del proyecto landing. Al priorizar la eficiencia y la simplicidad, podemos crear interfaces más rápidas y fáciles de usar.
Recomendación: Revisa tus selectores y considera reemplazar getOptionLabelsUsing() con options() + searchable() para una mejor experiencia de usuario y un código más limpio.
