Advice about using a spinner on only one record

Wappler General How To
#1

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.

#2

I found a way, and I am sure there is a simpler way using the keys or indexes of the repeat, but for the moment I have added a blank variable, the click event populates the variable and loads the server action, while the spinner only shows if the record id is equal to the booking_id AND the server action is executing, like this

<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));var_booking_id_clicked.setValue(booking_id)">
    <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 && (booking_id == var_booking_id_clicked.value)"></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>
1 Like
#3

Thanks for updating this @psweb, seems like I’ve been posting on something close to the same thing only a few hours apart from you: having a spinner within only one row of a repeat/table.

As my use-case uses POST API, thanks to your post I was able to come up with an equivalent solution: use a hidden form external to the repeat-region/table with unset hidden inputs. On-click, the hidden input gets set from the row’s unique-like ID, submits the form, and on-success unsets the form’s own input again. The conditional on the row’s styling is whether or not that row’s unique key is equal to the form’s (volatile) hidden input.

Note however, no matter what I tried, I couldn’t get the button inline border spinner to work and used alternate styling on the button.

1 Like
Show Disabled Button with Spinner on Form Submit
#4

This is how we do it as well.

You can get rid of the executing condition here, if the variable is used only for this spinner.
Clear the variable on success of SC.

1 Like