[1.1.0-rc.x] Screen flickering on next/prev #208

gustaveWPM · 2023-10-01T10:25:18Z

When I use: "next-international": "1.1.0-rc.1"
I get screen flickering when I use the "next" and "previous" buttons of my browser.

2023-10-01.12-15-19.mp4

This bug does not occur when I use: "next-international": "^1.0.1"

The text was updated successfully, but these errors were encountered:

QuiiBz · 2023-10-01T10:28:05Z

Please provide a reproduction so I can debug the issue.

gustaveWPM · 2023-10-01T10:29:39Z

Please provide a reproduction so I can debug the issue.

Doesn't this happen with the examples from the repo?

QuiiBz · 2023-10-01T10:32:18Z

No, but the example is very minimal and doesn't have any CSS/complex layout. So I'm not sure if it's because of the Suspense boundary used by next-international or not.

gustaveWPM · 2023-10-01T10:35:37Z

Hmm, wait a minute please.

gustaveWPM · 2023-10-01T10:41:26Z

Idk if it is helpful?
https://github.com/Tirraa/dashboard_rtm/tree/next-international-1.1.0-rc.1-screen-flickering-demo

QuiiBz · 2023-10-01T11:45:24Z

You're using I18nProvider twice (in src/app/[locale]/layout.tsx and src/components/shared/misc/HtmlElement). I've kept only the one in HtmlElement and moved it inside the body to avoid wrapping both html & body.

I added a fallback prop to I18nProviderClient and my assumption was correct: the fallback is triggered when navigating prev/next, and so replaces the whole layout. I'm not sure if this is the intended behaviour of React's use() hook.

gustaveWPM · 2023-10-01T11:48:15Z

You're using I18nProvider twice (in src/app/[locale]/layout.tsx and src/components/shared/misc/HtmlElement). I've kept only the one in HtmlElement and moved it inside the body to avoid wrapping both html & body.

Oops! You're right. I messed up when replacing useCurrentLocale with params.locale in my <html> element.
Thanks.

I added a fallback prop to I18nProviderClient and my assumption was correct: the fallback is triggered when navigating prev/next, and so replaces the whole layout. I'm not sure if this is the intended behaviour of React's use() hook.

:/
Maybe the locales should be cached when lazy-loaded?

gustaveWPM · 2023-10-01T16:16:39Z

https://youtu.be/T3m-MZkuadU?t=544
Maybe this?

QuiiBz · 2023-10-01T16:55:11Z

I've released this change in next-international@1.1.0-rc.3: aa19612 (#205)

It seems to work but also seems a bit hacky.

gustaveWPM · 2023-10-01T17:02:56Z

It seems to work but also seems a bit hacky.

I tried it, and it seems that it works perfectly.
No more screen flickering, still no issue in the staticly generated HTML files ( #190 ).

I've released this change in next-international@1.1.0-rc.3: aa19612 (#205)

I don't understand the try/catch block in this commit.

gustaveWPM · 2023-10-01T17:06:51Z

Well... If I refresh the page, and then use next/prev buttons, the screens flickering are back. :/

(It only occurs when I browse a new page with the "prev" button in this scenario.)

QuiiBz · 2023-10-01T17:24:31Z

I don't understand the try/catch block

React's cache() function isn't available on all "environments" (node, dom...), and throws an error if used in one:

I added a try catch to fallback to loading the locale as before, without using cache().

the screens flickering are back

Just noticed that, but it seems to only "flicker" (= trigger the Suspense' fallback) on the first forward/backward navigation. Going again to the same page doesn't cause a "flicker". This is probably the correct behaviour since the cache is busted because of the refresh.

gustaveWPM · 2023-10-01T18:22:53Z

I don't understand the try/catch block

React's cache() function isn't available on all "environments" (node, dom...), and throws an error if used in one:

I added a try catch to fallback to loading the locale as before, without using cache().

the screens flickering are back

Just noticed that, but it seems to only "flicker" (= trigger the Suspense' fallback) on the first forward/backward navigation. Going again to the same page doesn't cause a "flicker". This is probably the correct behaviour since the cache is busted because of the refresh.

This is weird...
The cache should "load" the same data, so there should be no flicker? :/

QuiiBz · 2023-10-01T18:49:37Z

Found the root cause: this useParams() seems to invalidate the cache somehow

next-international/packages/next-international/src/app/client/create-use-current-locale.ts

Line 9 in e2821cd

const params = useParams();

I don't know how to fix this though. This also means we'll no longer need cache(), only use()

QuiiBz · 2023-10-01T19:14:33Z

I published next-international@1.1.0-rc.4 (see ca9df65) - it adds a required locale prop to I18nProviderClient that is the locale params segment.

gustaveWPM · 2023-10-01T20:32:56Z

I still get flashes when I refresh the page, then use the next/prev buttons.
They seem a bit shorter.

Does the cache really changes nothing here?

gustaveWPM · 2023-10-01T23:17:59Z

Also, when I change the locale (using const changeLocale = useChangeLocale();, then changeLocale('it')) for the first time after loading the page in my web browser, I get a flash. Idk if it was the case before this RC?

QuiiBz · 2023-10-02T06:16:28Z

I still get flashes when I refresh the page, then use the next/prev buttons.

That is expected, similar to the explanation at the bottom. You shouldn't get any "flash" while navigating then going forward/backward during the same session (= not refreshing).

Does the cache really changes nothing here?

cache() is no longer used in the latest rc.

when I change the locale ... I get a flash

This is a drawback of using use(), which doesn't keep the previous value and immediately trigger the nearest Suspense boundary. On the other side, use() enables Static Rendering for Client Components.

gustaveWPM · 2023-10-02T09:08:04Z

Hello!

cache() is no longer used in the latest rc.

Ikr, and I'm curious to know if this doesn't change things for the worse.

which doesn't keep the previous value

So, why discontinue the use of cache()?
I don't understand this point. :/

QuiiBz · 2023-10-02T11:51:01Z

cache() doesn't solve the issue when refreshing the page and going forward/backward. The latest commit essentially does the same thing as when using cache(), except that the code is cleaner and makes more sense.

To recap: the last issue is forward/backward navigation immediately after refreshing the page. Normal navigation and Static Rendering are both working as expected. Tbh, this last issue doesn't feel like a huge problem to me. I personally almost never refresh a website, then go forward/backward without navigating to a page.

gustaveWPM · 2023-10-02T13:09:51Z

cache() doesn't solve the issue when refreshing the page and going forward/backward. The latest commit essentially does the same thing as when using cache(), except that the code is cleaner and makes more sense.

Eeyup, I finally figured it out before I went to sleep, and finally I thought I'd misunderstood again.

Tbh, this last issue doesn't feel like a huge problem to me. I personally almost never refresh a website, then go forward/backward without navigating to a page.

I agree.
But I think it might be worth to keep this problem in the issues, in case of a Eureka moment.

QuiiBz · 2023-10-05T09:46:33Z

Closing thanks to #205, will be released during this week officialy.

gustaveWPM added the bug Something isn't working label Oct 1, 2023

QuiiBz added the needs reproduction label Oct 1, 2023

gustaveWPM changed the title ~~[1.1.0-rc.1] Screen flickering on next/prev~~ [1.1.0-rc.x] Screen flickering on next/prev Oct 2, 2023

QuiiBz mentioned this issue Oct 1, 2023

feat: 1.1.0 #205

Merged

QuiiBz removed the needs reproduction label Oct 3, 2023

QuiiBz closed this as completed Oct 5, 2023

QuiiBz mentioned this issue Dec 21, 2023

fix: execute function in I18nProviderWrapper instead of I18nProvider #316

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1.1.0-rc.x] Screen flickering on next/prev #208

[1.1.0-rc.x] Screen flickering on next/prev #208

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 •

edited

Loading

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023 •

edited

Loading

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 •

edited

Loading

QuiiBz commented Oct 1, 2023 •

edited

Loading

QuiiBz commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 2, 2023

gustaveWPM commented Oct 2, 2023 •

edited

Loading

QuiiBz commented Oct 2, 2023

gustaveWPM commented Oct 2, 2023 •

edited

Loading

QuiiBz commented Oct 5, 2023

[1.1.0-rc.x] Screen flickering on next/prev #208

[1.1.0-rc.x] Screen flickering on next/prev #208

Comments

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 • edited Loading

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 • edited Loading

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 • edited Loading

gustaveWPM commented Oct 1, 2023 • edited Loading

QuiiBz commented Oct 1, 2023

gustaveWPM commented Oct 1, 2023 • edited Loading

QuiiBz commented Oct 1, 2023 • edited Loading

QuiiBz commented Oct 1, 2023 • edited Loading

gustaveWPM commented Oct 1, 2023 • edited Loading

gustaveWPM commented Oct 1, 2023

QuiiBz commented Oct 2, 2023

gustaveWPM commented Oct 2, 2023 • edited Loading

QuiiBz commented Oct 2, 2023

gustaveWPM commented Oct 2, 2023 • edited Loading

QuiiBz commented Oct 5, 2023

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023 •

edited

Loading

QuiiBz commented Oct 1, 2023 •

edited

Loading

QuiiBz commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 1, 2023 •

edited

Loading

gustaveWPM commented Oct 2, 2023 •

edited

Loading

gustaveWPM commented Oct 2, 2023 •

edited

Loading