Dark theme: Loader.gif never disappears

[Tintwo]

Hello,

I recently setup FreshRSS on my server with the latest Docker image, with the version 1.16.1-dev of FreshRSS.
I notice when I'm on a page where there is at least 1 stream, the animated loading gif is always visible on the list. Inside DOM, the concerned div element is id="first_load".
I guess the class loading is never changed and so the loading gif stays always.

Tested on Firefox 68.8.0 ESR and Chromium 80.0.x, on a Debian Buster, without AdBlocker.

Regards.

[Tintwo]

Another thing I didn't think it was important : on the default theme everything is OK.
The problem is visible on the "Dark" Theme, by "AD" (n°4/11).

[Alkarex]

Thanks for testing the master branch, @Tintwo
Please try this fix #2987

[Tintwo]

Hello @Alkarex ,
I just made a try with the master branch, on a new setup, and the problem still exists in the same way (both browsers), only with that theme apparently.

Note : I scrap my browser cache each time, just in case.

[Alkarex]

@Tintwo Ah, it is because the fix was not merged in /master yet. But I have just done so to ease testing. Please try again :-)

[Tintwo]

@Alkarex
Oh ! 🤣
I just tested again, now it's work as expected !

Thanks for the fix, I'm waiting the docker image update ;)

[edit] Oh, docker image already available, works fine :)

[nicofrand]

[EDIT]: there is surely a good reason why it was not done in the way I describe below, I don't want to criticize (hence this edit, to make things clear), I just would like to understand the reason so I don't miss some important things when trying to adapt my extension.

Hi!

I can see the issue on several other themes (Flat design for example), but that also creates an issue for my extension (https://framagit.org/nicofrand/xextension-threepanesview/-/issues/10).

Why isn't that spinner in the div.stream? I would expect the spinner to exists on first load (as the name suggests) until the the items are loaded and the loader is replaced by the items. Something like that:

Before:

<div class="stream">
    <div class="first_load loading"></div>
</div>

After:

<div class="stream">
    <div class="flux"></div>
    <div class="flux"></div>
    <div class="flux"></div>
</div>

[Alkarex]

@nicofrand It is nice that some people are testing the master branch :-)
That is more or less the idea, but working during page load (i.e. the DOM has not fully arrived yet), and even without JavaScript (but we can for sure add a JavaScript line to remove it from the DOM). The main difficulty is Chrome, which, as opposed to Firefox which obeys CSS rules fine during page load, does not do so (as well).

For instance, a code like the following works in Firefox but not in Chrome:

/* Only during load, i.e. last or second last div node */
#first_load:not(:nth-last-of-type(-n+2)) {
	display: none;
}

I can reproduce the bug with some themes, but only in the mobile view, right, or have you seen it in desktop view as well?

In your extension, can't it be hidden by the content loaded on top of it?

[Alkarex]

Fix coming

[nicofrand]

I can reproduce the bug with some themes, but only in the mobile view, right, or have you seen it in desktop view as well?

I only tested on desktop and could reproduce with the "Flat design" theme.

In your extension, can't it be hidden by the content loaded on top of it?

I try to not force the colors at when possible, to remain compatible with all themes, so I keep a transparent background.

I'll test your fix, thanks!