Rails RenderAsync On Click Example

In this example, we will demonstrate how to use the render_async gem to load content dynamically when a button is clicked.

This approach is useful for improving user experience by loading content only when needed.

<details>
    <summary id='load-inventory'>Load Inventory</summary>
    <%= render_async summary_path(@item.id), toggle: { selector: '#load-inventory', event: :click } do %>
        <div>
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span role="status">Loading...</span>
        </div>
    <% end %>
</details>

Starting from the top, we have a <details> element that contains a visible <summary>.

The details element has an id, and on the render_async call, we target the selector and name the event.

When the <summary> is clicked, it will trigger the render_async call, which will load the content from the specified path asynchronously and replace the loading spinner with the actual content.

This allows for a smooth user experience without reloading the entire page.