[locale-modal-flashing]: The locale modal is flashing when the page is loading

[paatsinsuwan]

Engineering info:

• Innovation Team engineer: @andy-blum
• Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/HC-2386
• DPO consulting engineer: @IgnacioBecerra

---

Description

Locale modal is flashing when refresh the page while it should not

video

Component(s) impacted

dotcom-shell locale-modal

Browser

Firefox, Chrome

Carbon for IBM.com version

^1.14.1

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

NDA

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://github.com/carbon-design-system/carbon-for-ibm-dotcom-web-components-template

Steps to reproduce the issue (if applicable)

Clone template https://github.com/carbon-design-system/carbon-for-ibm-dotcom-web-components-template Run yarn start (might have to fiddle with webpack-dev-config.js) After the page load, hit refresh and wait

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[ljcarot]

@paatsinsuwan the link to video in Box does not work for me.

[paatsinsuwan]

@ljcarot I've updated the link to the video and also here https://ibm.box.com/v/modal-flickering-bug.

[jeffchew]

@proeung adding @IgnacioBecerra to the issue. He mentioned he may know the cause of this issue.

[IgnacioBecerra]

@paatsinsuwan The video seems to be unavailable, but this issue might be fixed in v1.30.0-rc1. Could you test with the new release? If it's not fixed I might have another solution for this. Let me know!

[paatsinsuwan]

@IgnacioBecerra I just ran yarn update-canary and I'm still seeing the flash.

https://user-images.githubusercontent.com/910956/150871473-1921ac41-6fc7-4403-9391-76628fccd6c7.mov

[IgnacioBecerra]

@paatsinsuwan Would you be able to share your repo? I can't seem to replicate the error on my local machine.

[andy-blum]

@paatsinsuwan I'm also unable to replicate based on the steps you provided in the issue description. Is this issue still occuring with the latest changes to the template repo?

[paatsinsuwan]

@IgnacioBecerra @andy-blum Confirm that the issue is no-longer happening. But I do have to re-clone the template to get it to work as expected. Thank you both.

[hongyuxgt]

@IgnacioBecerra @andy-blum It looks like the same issue happened in component(footer-container), would you please help to check？ import "@carbon/ibmdotcom-web-components/es/components/footer/footer-container.js"

[kennylam]

Issue still occurs in FF as of v1.31.1.

[kennylam]

@paatsinsuwan Is there a site where this is happening you can share? A number of us have tried to reproduce this and cannot.

[paatsinsuwan]

@kennylam I can still see it with the latest version of this template. https://github.com/carbon-design-system/carbon-for-ibm-dotcom-web-components-template

[kennylam]

Got it, we'll take a look. Thanks!

[andy-blum]

@paatsinsuwan Can you link something live other than the github repo? We've looked at that template following the steps to reproduce in the issue description and have not been able to reproduce.

[paatsinsuwan]

@andy-blum have you tried in FF? I'm pretty sure you'll see it. It was reported on this page https://www.ibm.com/lets-create/ until the agency apply a local version of fix to the code.

dds-locale-modal-composite { display: none; &[open] { display: contents; } }

[andy-blum]

@paatsinsuwan Yes, we tried firefox.

Here's what I did:

1. Open project in gitpod using this link: https://gitpod.io/#https://github.com/carbon-design-system/carbon-for-ibm-dotcom-web-components-template
2. Wait for project to build and start. When the process is ready it should pop up an alert allowing you to open the preview
3. If that banner doesn't appear or you miss it, you can open the preview from the sidebar (1). The globe icon (2) will launch the preview, but it will be private by default, requiring you to be authenticated in the browser. You can make the preview public with the unlock icon (3)

Using the above process, I was unable to replicate the flashing issue, and @kennylam @ariellalgilmore and @annawen1 also confirmed they were unable to see the flash.

[paatsinsuwan]

@andy-blum Hey man, if you confirmed it fixed, I'll take it.

[kennylam]

Thanks @andy-blum!