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.
44 lines
780 B
CSS
44 lines
780 B
CSS
@import "photoswipe/dist/photoswipe.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.loading {
|
|
position: relative;
|
|
}
|
|
|
|
.loading::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 1rem;
|
|
transform: translateY(-50%);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid transparent;
|
|
border-top-color: currentColor;
|
|
border-right-color: currentColor;
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: translateY(-50%) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
transform-origin: center center;
|
|
} |