add spinner gif to display instead of No results while data is loading

[grmbyrn]

I added spinner.gif to torrents.vue to display instead of No results, which currently flashes on the screen when torrents are being loaded as mentioned here.

<span data-cy="no-results-element" class="text-neutral-content flex items-center justify-center">
  <img src="/spinner.gif" class="w-20 h-20" alt="Loading Spinner">
</span>

[josecelano]

HI @grmbyrn I think this solves a different problem now.

The issue #411 was solved here.

Anyway, this PR is still useful because you see the spinner while the app is getting the list from the API. Althougth, that should be fast.

We can merge it but some E2E tests are failing.

[grmbyrn]

HI @grmbyrn I think this solves a different problem now.

The issue #411 was solved here.

Anyway, this PR is still useful because you see the spinner while the app is getting the list from the API. Althougth, that should be fast.

We can merge it but some E2E tests are failing.

Hi @josecelano I realised after I'd made the PR that this was referring to another part of the app, but I was seeing 'No results.' flash on my screen while it was getting the list so thought the spinner would suit there.

As for the E2E tests, I've been going through it and trying to find a solution but new errors keep coming up. I haven't done much E2E so maybe it's just something I need to look at more.

[grmbyrn]

HI @grmbyrn I think this solves a different problem now.

The issue #411 was solved here.

Anyway, this PR is still useful because you see the spinner while the app is getting the list from the API. Althougth, that should be fast.

We can merge it but some E2E tests are failing.

Hi @josecelano the E2E tests seem to be passing now that I changed no_torrents_to_display.cy.ts to expect an image and not text.

[josecelano]

Hi @grmbyrn the spinner should be shown only when the client is fetching data from the API. If the result is empty after making the request, we should keep the old message "No results". Otherwise people might think there is a problem with the app (API, connectivity, ...)

On the other hand, I don't know if a spinner is the best solution. We wanted to use skeletons. See #411.

Spinners vs Skeletons

• https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e
• https://medium.com/productboard-engineering/%EF%B8%8F-spinners-versus-skeletons-in-the-battle-of-hasting-b51b9c6574ef