search

Decathlon / vitamin-web

Decathlon Design System UI components for web applications
https://decathlon.github.io/vitamin-web
Apache License 2.0
282 stars 76 forks source link

bug: flickering of the screen after the 'toast' component is displayed #1311

Closed AlbertNambiaparambil closed 1 year ago

AlbertNambiaparambil commented 1 year ago

Describe the bug We recently added the toast component on the profile page of Decathlon.es. As you can see, the component serves the purpose but it is followed by a weird flickering/reload of the screen.

Our programmers have said that it is caused by a 1000ms timeout after the toast component is displayed.

Steps to reproduce

Expected behavior The flickering of the screen should not happen.

Browsers affected

Version affected

thibault-mahe commented 1 year ago

Hi @AlbertNambiaparambil ,

as we discussed together, after investigation, I am a little mixed on the problem you raised. I have not been able to find any behavior in our Toast that would cause the page to reload.

On the other hand I can see that the submit on the front side explicitly declares a reload of the page (I just shared with you a link to the exact lines of code in your repo):

const submit = async ({ detail: addressData }) => {
    ...
    setTimeout(function () {
      window.location.reload();
    }, 1000);
  };

Also, it is a behavior that can be found also on the French site for example, with a code exactly similar. Why this reload is added to this behavior is another question that you should probably ask to the NFS core team. My guess is that the reload is done to refresh the page and its data, then the new updated data are fetched and shown on the screen.

I close this issue but feel free to re-open it if you think that I am wrong. Thanks.