• Home

  • Episodes

  • About

  • Login
    •
    David Kimura PRO said almost 3 years ago on Hotwire Dashboards :
     ☒ For the loading text, I would probably introduce something like a spinner instead of changing the content text.

    # 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.


    0 0 0