Advice about using a spinner on only one record

I have a table generator element on my page, it list 10 records, each table row has an onclick on it, and the onclick loads another server action.

i would like to display a progress spinner in front of only the clicked record and not all 10 records

Is there a way to do something like this, here is my current code for the page.

<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="sc_fetch_planner_requests.data.query_planner_requests" id="tableRepeat1">
  <tr dmx-on:click="sc_fetch_itinerary.state.executing ? '' : (sc_fetch_itinerary.load({booking_id: booking_id},true))">
    <td dmx-text="pr_id"></td>
    <td dmx-text="created_on.formatDate('dd MMM yy, HH:mm')"></td>
    <td><span class="spinner-border spinner-border-sm me-3" role="status" dmx-show="sc_fetch_itinerary.state.executing"></span>{{full_name}}</td>
    <td dmx-text="destinations.default('Not Sure')"></td>
    <td dmx-text="start_date.formatDate('dd MMM yy')+' - '+end_date.formatDate('dd MMM yy')"></td>
    <td dmx-text="name"></td>
    <td><span class="badge bg-white border fw-lighter rounded-pill text-black">{{status}}</span> <span class="badge bg-white border fw-lighter rounded-pill text-black text-capitalize" dmx-bind:title="first_name+' '+last_name">{{assigned_to ? first_name.substr(0, 1)+' '+last_name.substr(0, 1) : ''}}</span></td>
  </tr>
</tbody>

I have tried changing this part from

<td><span class="spinner-border spinner-border-sm me-3" role="status" dmx-show="sc_fetch_itinerary.state.executing"></span>{{full_name}}</td>

To this

<td><span class="spinner-border spinner-border-sm me-3" role="status" dmx-show="sc_fetch_itinerary.state.executing && sc_fetch_itinerary.data.query_booker.booking_id == booking_id"></span>{{full_name}}</td>

But I think I will never get that booking id until the script has loaded the data, so it will never work while executing, is there a way for me to have a conditional type executing like

<td><span class="spinner-border spinner-border-sm me-3" role="status" dmx-show="sc_fetch_itinerary.state.executing.where(`$_GET.booking_id`, booking_id, '==')"></span>{{full_name}}</td>

Or is there no way to access the sent query parameter while the server action is exacuting.

Community Page
Last updated: