Smooth Concurrent Updates with Hotwire Stimulus

# app/services/fetch_jokes_service.rb

class FetchJokesService
  def perform(missing_jokes_count)
    jokes = []

    missing_jokes_count.times do |num|
      # logic for fetching/creating jokes same as before
      # (...)

      add_joke_card(joke)
    end

    true
  end

 # now this is the only broadcast from the service
  def add_joke_card(joke)
    Turbo::StreamsChannel.broadcast_append_to(
      [ jokes_request, "jokes" ],
      target: "jokes_grid",
      partial: "jokes/joke",
      locals: { joke: joke }
    )
  end

  # rest of service code
  # (..)
end

<!-- app/views/jokes_requests/show.html.erb -->

<!-- just one stream is needed now -->
<%= turbo_stream_from @jokes_request, "jokes" %>

<div id="jokes_show"
     data-controller="progress-bar"
     data-progress-bar-limit-value="<%= @jokes_request.amount %>"
     data-progress-bar-actual-value="<%= @jokes_request.jokes.size %>">

  <!-- rest of the html  -->
  <!-- (...)  -->
  <%= render "jokes_progress_bar", actual: @jokes_request.jokes.size, 
                                   limit: @jokes_request.amount %>

  <%= turbo_frame_tag "jokes" do %>
    <div id='jokes_grid'
        data-progress-bar-target="jokesGrid"
        class="grid grid-cols-3 gap-4 mt-4">
      <% @jokes.each do |joke| %>
        <%= render 'jokes/joke', joke: joke %>
      <% end %>
    </div>
    <% if @jokes_request.jokes.size > Joke::PER_PAGE %>
      <%= render "jokes_pagination", pagy: @pagy %>
    <% end %>
  <% end %>

// app/javascript/controllers/progress_bar_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="progress-bar"
export default class extends Controller {
  static values = {
    limit: 0,
    actual: 0,
  }
  static targets = ["progress", "count"]
  connect() {
    addEventListener("turbo:before-stream-render", ((event) => {
      const fallbackToDefaultActions = event.detail.render

      event.detail.render = (streamElement) => {
        if (streamElement.action === "append" && streamElement.target === "jokes_grid") {
          this.increment()
        }
        fallbackToDefaultActions(streamElement)
      }
    }))
  }

  increment() {
    this.actualValue++
    this.updateProgress()
    this.updateCount()
  }

  updateProgress() {
    let progress = (this.actualValue / this.limitValue) * 100
    this.progressTarget.style.width = `${progress}%`
  }

  updateCount() {
    this.countTarget.innerText = `${this.actualValue} / ${this.limitValue}`
  }
}