David Kimura
PRO
said over 4 years ago
on
Hotwire Dashboards
:
☒ For the loading text, I would probably introduce something like a spinner instead of changing the content text.
Added a stimulus controller called refresh which will add the spin class when clicked on
This works because the entire turbo frame tag will be replaced. So, when the link is clicked, it will start spinning. Once the response is rendered, the link (as well as the entire turbo frame tag) will be replaced and it will "appear" to stop spinning.
# css
.spin {
-webkit-animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Added a stimulus controller called refresh which will add the spin class when clicked on
# show page
<%= link_to reload_icon, weathers_feels_like_path, class: "float-end", data: { controller: 'refresh' } %># refresh_controller.js
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="refresh"
export default class extends Controller {
connect() {
this.element.setAttribute("data-action", "click->refresh#click")
}
click(e) {
this.element.classList.add("spin")
}
}This works because the entire turbo frame tag will be replaced. So, when the link is clicked, it will start spinning. Once the response is rendered, the link (as well as the entire turbo frame tag) will be replaced and it will "appear" to stop spinning.