Loading state for component

[jbjuin]

Hi Eddy,
I just pulled your new version. Awesome !
I love the @ syntax for event binding.

Do you think it would be hard to add a "loading" state on components ?
Where should I start to implement this ?

Thanks

[edelvalle]

There is a way to do this already. Set the loading state immediately and self.send a message that will execute the actual action and disable the loading state.

The other way would be, when an event is forwarded to the server, give it a time out and if there is no response in that time enable the loading state until there is a response. The problem is that in the current implementation if the HTML does not change there is no response from the server. We would have to send an empty response to let the front-end know that the event was processed.

What do you think? In which case do you need this loading state? When does a component should go into "loading" state?

[jbjuin]

Hi Eddy, thanks for replying.

There is a way to do this already. Set the loading state immediately and self.send a message that will execute the actual action and disable the loading state.

The other way would be, when an event is forwarded to the server, give it a time out and if there is no response in that time enable the loading state until there is a response. The problem is that in the current implementation if the HTML does not change there is no response from the server. We would have to send an empty response to let the front-end know that the event was processed.

What do you think? In which case do you need this loading state? When does a component should go into "loading" state?

I solved the case where computation are very long and delegated to celery... In that case I update a model that store the progression of the calculation and the frontend explicitly update with a progress bar.

A loading state would be useful when the rendering takes a little longer than usual... ~1-5 seconds.
I think I need to turn this around more to see how to do this. Maybe keeping a "state" in the frontend side of the component... because we need to know who sent a message and didn't get an answer yet... and you are right that a message should be sent in all cases, even if HTML did not change.

Let me think more about this and if i'm stuck I will come back to ask.

[jbjuin]

@edelvalle Hi Edy,

I was thinking again about this loading state (I made a small modification to reactor.coffee to handle it). Do you see a way to do that using the hooks that you mention here: https://github.com/edelvalle/reactor#js-hooks ?

I think a missing hook would be: update started - when a user event is just sent to the backend.

With @update_started and @updated it should be possible to write a companion app that provides the "loading" state for components (during re-rendering) quite easily. What do you think ?

PS: I started putting everything we did around reactor in shape to publish soon: jinja integration, a simplistic "vuex" router, a store (easy sibling components communication), permissions around components, a chartjs integration, an upload component... each one in its own app.

[jbjuin]

Hi Eddy,
this is the solution I arrived at when managing the loading state on the server:

<div {{ header() }} >
    {% if loading %}
    <h1>Loading...</h1>
    {% else %}
    <button @click.inlinejs="reactor.send(this, 'set_loading', {}); reactor.send(this, 'long_task')">Run long task</button>
    {% endif %}
</div>

The long_task receiver set a loading = False attribute when the long task is done and voilà !
A cleaner API would be to have a possible @event.set_loading.loader for instance to add the first js part: reactor.send(this, 'set_loading', {});.

Cons:

• 2 roundtrip to the server: one for the loading, second for the actual callback

Pros:

• State if fully on the backend and possibilites are large since a full template can be shown when "loading"

An alternative could be:

• add "class" on the component using js
• and remove it using onreactor-updated

What do you think @edelvalle ?