Showing loading indicator, with async requests

Questions / Help
,
1

So this is what I came up with, after reading through lots of Elixir Forum posts.

<.button class="mt-5 disabled:bg-primary/80" disabled={@loading} phx-disable-with="">
    <div class={[!@loading && "hidden", "phx-submit-loading:flex items-center justify-center", @loading && "flex"]}>
      <div class="spinner is-elastic h-5 w-5 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent mr-3">
      </div>
      Loading
    </div>
    <div :if={!@loading} class="phx-submit-loading:hidden">
      Check Metadata
    </div>
</.button>

I have enabled the latency debugger and set it to 1000 ms, and still, the loading indicator and stuff are smooth.

Is there a better way to do this?

Or should I stop being fancy, and just go with plain text? Like this:


<.button class="mt-5 disabled:bg-primary/80" disabled={@loading} phx-disable-with="Loading...">
    <span :if={@loading}>
      Loading...
    </span>
    <span :if={!@loading} class="phx-submit-loading:hidden">
      Check Metadata
    </span>
</.button>

On first click, phx-disable-with can set a text, however, with the async request, it resets to the original text as soon as the first response comes back from the server.

So it went something like this:

loading…
Check Metadata

Then, I added a check inside the button, with if-else, and got it to look like this:

loading…
0 loading (This one with indicator)
Check Metadata (Once the loading was truly done)

With my 3rd attempt and quite a bit of a workaround, I got it to look like:

0 Loading (With the loading spinner from the start till the response comes back)
Check Metadata (Once the loading is done)

Metadata Checker

Please ignore the weird compression on the drop shadow. It’s a gif, video is not allowed.

2

I think this is perfectly fine, after all this is more a question of resources synchronization than liveview.

1 Like