shrink list loading indicator to avoid page repaints

[RayBB]

Noticed while working on #10776

When you load a book page the cover image taking a while to load causes the page to jump.
However, once that's fixed in #10776 you'll be quick to notice the next thing that jumps around.
That is the "Loading..." indicator for lists.

I think that we should remove that loading indicator because:

1. For most users most of the time there will be no lists to load
2. It causes the page to jump
3. It generally loads so fast it isn't really useful.

Technical

Testing

The video below gives a nice demo

Screenshot

list_loading.mp4

Stakeholders

[cdrini]

Niiice! Hmmm, I think removing it entirely might be a touch confusing for some of our power users who might rely on knowing if a book is on a given list. So I think the next best thing we can do is to make it position absolute so it takes up no space. Something like this. You might need to also add an inline style to make it appear correctly before css load.

Hopefully enough to give those power users the cue they need, without being to confusing/jarring for others. In some universe, we'll hopefully just make this performant enough to not need lazy loading :')

.list-overview-loading-indicator {
  position: relative;
}

.list-overview-loading-indicator::before {
  content: "Loading...";
  font-size: 8px;
  text-transform: uppercase;
  text-align: center;
  line-height: 0;
  height: 8px;
  width: calc(100% - 8px);
  position: absolute;
  top: -8px;
  left: 0;
  opacity: 0.75;
}

[RayBB]

@cdrini I think your proposal works to fix the problem (repainting) but it does leave a bit to be desired for the casual user to see this loading thing pop up and then disappear (in the rare care they do notice it -- the loading indicator disappears very fast for me).

How about we put a loading indicator on the want to read dropper? Maybe where the little drop down arrow is.
This way, no repaint but it also makes sense because if you open that dropper before the partials come you'd get a loading indicator anyway.

[RayBB]

On second thought if the dropper is too hard to fuss with then we could have a small text that doesn't disappear like:
Loading lists...
You have this on 0 lists
You have this on 1 list
Etc

[cdrini]

My thinking is, there are 2 use cases:

1. People who don't use lists very in depth. They do not really need to see the loading indicator. This is the majority.
2. People who use lists a lot, and will be looking to see them, and gain meaning if they are or aren't there. This is a high-impact minority.

(1) restricts us to something low-profile, so no animations or motion, since that'll attract the attention of a bunch of folks who don't really need to be looking there.

(2) restricts us that it must be something that can be seen when looked for.

The tiny loading text I think meets this requirement. No motion, so (1) people will likely not notice it, and (2) people will, even if they can't read it, notice something there and come to associate it with loading. And if a (1) person happens to notice it, they can just look/read it if necessary.

Tiny loading text also is a good step improvement over what we have, which has this same issue, but is worse for the (1) crowd, and worse for all due to the layout shifts.

[RayBB]

@cdrini once I put it together your suggestion looks pretty good. It solves the main issue of a jumpy screen so lets go with it!

Demo:
https://github.com/user-attachments/assets/57bfe527-e2c5-4d4f-8ef0-dabc44dd3d54

[cdrini]

Lgtm! Tested on testing. The "..." is not appearing... but I think that was a pre-existing bug so not worrying about it.