Rails stimulus one form change for many urls and turbo frames - ruby-on-rails

Question

I am building a dashboard with multiple elements like charts, tables, simple fields with calculated values etc and I want to use Rails7 with stimulus.
In the past I used jQuery so I just created empty elements and then called several ajax requests in paralel to get data for every elements and populate it. So initial page load was super fast and then it loaded all necessary data. Dashboard had few dropdowns options to change data and when I loaded page I just sent defaults. Every dropdown change reloaded all data for all elements by filter used in dropdown.
How to do similar approach with stimulus?
When I use turbo form what I can do is submit form on page load, but it looks ugly (page initially loads and instantly reloads). And if I have many elements it gets slow because it first needs to finish all calculations.
this is my simple filter with 2 dropdowns
<%= form_with url: "", method: :get, data: { controller: "home", home_target: "form", turbo_frame: "home_dashboard", turbo_action: "advance" } do |form| %>
<div class="row">
<div class="d-sm-flex align-items-center mb-3">
<div class="col-lg-2" >
<%= form.select :city, options_for_select(City.all.pluck(:name,:id)), {include_blank: (t 'all')}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
<div class="col-lg-2" >
<%= form.select :year, options_for_select(#years.reverse, (params[:year] || Date.today.year)), {selected: params[:year], include_blank:false}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
</div>
</div>
<% end %>
and this is my home controller in stimulus which is simple
import { Controller } from "#hotwired/stimulus"
// Connects to data-controller="home"
export default class extends Controller {
connect() {
}
static targets = ["form"]
connect() {
this.formTarget.requestSubmit()
}
search() {
this.formTarget.requestSubmit()
}
}
my rails controller gets ugly big because I am calculating lot of fields dynamically and showing them in turbo frame tag...this is just a part of data I want to show so there should be much more
<%= turbo_frame_tag "home_dashboard" do %>
<div class="row">
<div class="col-xl-6">
<div class="card border-0 mb-3 overflow-hidden ">
<div class="card-body">
<div class="row">
<div class="col-xl-7 col-lg-8">
<div class="mb-3 fs-13px">
<b><%= (t 'invoices.invoiced').upcase %></b>
</div>
<div class="d-flex mb-1">
<% if #invoices_sumed.present? %>
<h2 class="mb-0"><span data-animation="number" data-value="<%= #invoices_sumed[0][1] %>"><%= #invoices_sumed[0][1] %></span> <%= #invoices_sumed[0][0] %></h2>
<% else %>
<h2 class="mb-0"><span data-animation="number" data-value="0">0</span> EUR</h2>
<% end %>
</div>
<div class="mb-3">
<i class="fa fa-caret-up"></i> <span data-animation="number" data-value="<%= #invoices_sumed_compare %>"><%= #invoices_sumed_compare %></span>% <%= t 'invoices.compared_previous_year' %>
</div>
<hr>
<div class="row text-truncate">
<div class="col-6">
<div class=""><%= t 'invoices.total' %></div>
<div class="fs-18px mb-5px fw-bold" data-animation="number" data-value="<%= #invoices.size %>"><%= #invoices.size %></div>
<div class="progress h-5px rounded-3 mb-5px">
<div class="progress-bar progress-bar-striped rounded-right " data-animation="width" data-value="<%= calc_year_ratio(#invoices.size,#invoices_total_size) %>%" style="width: <%= calc_year_ratio(#invoices.size,#invoices_total_size) %>%;"></div>
</div>
</div>
<div class="col-6">
<div class=""><%= t 'invoices.average' %> <small>(<%= (t 'invoices.median').to_s + ":" %> <strong><%= "#{#invoices_median_value.round(2)} #{#invoices_top_currency}" %></strong>)</small></div>
<div class="fs-18px mb-5px fw-bold"><span data-animation="number" data-value="<%= #invoices_avg_value.round(2) %>"><%= #invoices_avg_value.round(2) %></span> <%= #invoices_top_currency %></div>
<div class="progress h-5px rounded-3 mb-5px">
<div class="progress-bar progress-bar-striped rounded-right bg-orange" data-animation="width" data-value="<%= calc_median_total_ratio(#invoices_avg_value,#invoices_max_value) %>%" style="width: <%= calc_median_total_ratio(#invoices_avg_value,#invoices_max_value) %>%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-4 align-items-center d-flex justify-content-center">
<canvas
data-controller="chart"
data-chart-data-value='<%= #chart_total.to_json %>'
data-chart-options-value="<%= #chart_options.to_json %>"
></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="table-responsive">
<table id="contractors" class="table table-hover align-middle" style="width:100%;">
<thead></thead>
<tbody>
<% #contractors.each do |contractor| %>
<tr>
<td><%= contractor[0]%></td>
<td><%= contractor[2]%></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<% end %>
is there any way how to split this in multiple turbo frames with multiple urls to call with one form select change?