songtianlun
80c2f9a1df
- Implement loading state in the search input with spinner. - Optimize the search request to handle pending requests and cancels. - Add dynamic response handling for Turbo frames to load search results. - Create a new partial for city search results. - Update the cities controller to support Turbo stream responses. These enhancements improve user experience during searches by showing a loading spinner and addressing potential issues with overlapping requests, ensuring that the application remains responsive and functional when fetching city search results.
24 lines
1.0 KiB
Plaintext
24 lines
1.0 KiB
Plaintext
<!-- app/views/cities/_results.html.erb -->
|
|
<div class="container mx-auto px-4 py-8">
|
|
<% if cities.empty? %>
|
|
<div class="text-center py-16">
|
|
<div class="text-base-content/50">
|
|
<svg class="w-16 h-16 mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
|
|
</svg>
|
|
<h3 class="text-xl font-semibold mb-2"><%= t('.no_results_title') %></h3>
|
|
<p class="text-base-content/70">
|
|
<%= t('.no_results_message') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<%= render partial: 'city', collection: cities %>
|
|
</div>
|
|
|
|
<%= render 'shared/pagination',
|
|
collection: cities,
|
|
collection_name: 'cities' %>
|
|
<% end %>
|
|
</div> |