OakImage has "fullscreen" styles before JS, causing large flash of images

[remy]

Zip to replicate with reduced case:
component-image-issue.zip

Screenshot of issue in production (on OpenAPI):

Problem stems from these properties, but the wrapping div doesn't have a style prop (position: relative) which would fix it (but it is in the class, but this relies on JS to render first):

[kimon-satan]

I don't understand why we aren't getting the same issue on OWA . Could it be that we have something set up differently ?

[remy]

I don't think OWA is fully using the componets - but rather a hybrid. Certainly those styles aren't being applied:

[carlmw]

I think i've found the issue. In your example you've got StyledComponentsRegistry which is an implementation for app router, but you've also got a pages router implementation inside _document.tsx.

I removed StyledComponentsRegistry entirely and all seems to work as expected.

I reckon that is scooping up all the styles before they reach _document.tsx

app router vs pages cause so much confusion.

[remy]

Local test with both _document and _app instance of the StyledComponentsRegistry removed (which was helping with conflicts between server classes and client classes being differnt).

Definitely agree on app vs. pages causing confusion - the component lib definitely leans towards app router (though I know there was that recent PR to update the docs)

[carlmw]

@remy you still need the logic in _document but not the one in _app https://github.com/oaknational/oak-openapi/pull/23

[remy]

Cheers, I'll try that this morning

…

On Mon, 22 Jul 2024, 09:54 Carl Whittaker, ***@***.***> wrote: @remy <https://github.com/remy> you still need the logic in _document but not the one in _app oaknational/oak-openapi#23 <oaknational/oak-openapi#23> — Reply to this email directly, view it on GitHub <#237 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAADLBGIA4KVOLMKAMRRPILZNTCEFAVCNFSM6AAAAABLENTHRCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBSGQZTGMRYGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>