Closed Mateusz-Dobrzynski closed 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.
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.
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.
Steps to reproduce
Remarks
Acceptance criteria