https://github.com/suzukiryuichiro/loading-animation

https://github.com/suzukiryuichiro/loading-animation

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/suzukiryuichiro/loading-animation
• Owner: SuzukiRyuichiro
• Created: 2023-08-31T03:13:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-31T03:41:16.000Z (over 1 year ago)
• Last Synced: 2024-11-09T09:39:42.704Z (about 2 months ago)
• Language: Ruby
• Size: 41 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Steps to add a loading animation (with Font Awesome)

1. Add an application wide spinner div in the layout html (initially invisible)

```html

  

  


    

    

  

  <%= yield %>


```

2. Add a stimulus controller that handles showing the spinner

```sh

rails g stimulus spinner

```

3. mount the controller to the body and set the spinner as a target

```html

  

  


    

    

  

  <%= yield %>


```

4. code the spinner controller's show action

```js

// spinner_controller.js

import { Controller } from "@hotwired/stimulus";

// Connects to data-controller="spinner"

export default class extends Controller {

  static targets = ["spinner"];

  show() {

    // Simply make the spinner that is initially hidden visible when the form starts submitting

    this.spinnerTarget.classList.remove("invisible");

  }

}

```

5. add an action trigger to the form. trigger will be [`turbo:submit-start`](https://turbo.hotwired.dev/reference/events)

```erb



  <%= simple_form_for @recipe, data: { action: 'turbo:submit-start->spinner#show' } do |f| %>

    <%= f.input :title %>

    <%= f.submit %>

  <% end %>



```