debatecore / debate-tools

Battle-tested utilities to aid with Oxford format debates.
https://tools.debateco.re
GNU Affero General Public License v3.0
1 stars 3 forks source link

Fix clock images #87

Closed Mateusz-Dobrzynski closed 5 months ago

Mateusz-Dobrzynski commented 5 months ago

Steps to reproduce

Remarks

Acceptance criteria

jakubmanczak commented 5 months ago

Notice that the "Loading…" text is being displayed indefinitely and an error is thrown the console

No error is thrown on Chrome based browsers for me. That tracks with the following:

It's not the image being broken, but the way we decide to show them. As seen below, simply commenting out the code that hides the element while it's loading is enough for it to show.

image image
jakubmanczak commented 5 months ago

After a bit of testing, it is my educated guess that the onLoad callback doesn't actually fire if the image element isn't rendered.

You can force it to work by commenting out the hidden={} line (no. 49) and adding it back - since it rendered and is now presumably kept in memory or cache, the onLoad fires even after navigating to config view and back. If you refresh though, it stops working again. This happens no matter if we use hidden={}, the hidden class or conditionally avoid rendering it.

This doesn't (!) happen if you apply opacity-0 instead of hiding it – since it renders the element anyway, and thus onLoad can fire.

Looking at the node-modules diff for a53ea2824e02ff84b8edfc55000f91b5b928e352 as well as package.json, we permitted a nextjs minor version increment of 14.1.0 to 14.2.4, where this behavior could've changed as some kind of optimisation.

jakubmanczak commented 5 months ago

Looking at the node-modules diff for https://github.com/debatecore/debate-tools/commit/a53ea2824e02ff84b8edfc55000f91b5b928e352 as well as package.json, we permitted a nextjs minor version increment of 14.1.0 to 14.2.4, where this behavior could've changed as some kind of optimisation.

This seems to have been a wrong assumption – downgrading explicitly back to next 14.1 or even 14.0 doesn't bring back old behavior.

Nevertheless, turning down the opacity instead of hiding the image seems to fix the issue.