Content flashes when using any components with an icon before hydration completes

[timja]

Summary of the bug

When refreshing the page using a new app from next.js starter we get a flash when components are loading:

https://github.com/user-attachments/assets/781861fb-bb54-47b3-8067-2f6f94304ada

🪜 How to reproduce

Tell us the steps to reproduce the problem:

1. Go to page: '...'
2. Click on: '....'
3. Type in: '....'
4. See the error

📸 Screenshots or code

Example code:

export default function PageInner() {
    return (
        <>
            <IcTopNavigation version="v0.0.7">
                <Link href="/" slot="app-title">
                    ICDS Title
                </Link>
                <Link href="/" slot="short-app-title">
                    ICDS
                </Link>
                <Link href="/" slot="app-icon">
                    <SlottedSVG
                        xmlns="http://www.w3.org/2000/svg"
                        height="inherit"
                        viewBox="0 0 24 24"
                        width="inherit"
                        fill="inherit"
                    >
                        <path d="M0 0h24v24H0V0z" fill="none"/>
                        <path
                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
                    </SlottedSVG>
                </Link>
                <IcSearchBar slot="search" placeholder="Search" label="Search"/>
                <IcNavigationButton
                    label="Test button"
                    slot="buttons"
                    onClick={() => alert("test")}
                >
                    <SlottedSVG
                        slot="icon"
                        xmlns="http://www.w3.org/2000/svg"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        fill="#000000"
                    >
                        <path d="M0 0h24v24H0V0z" fill="none"/>
                        <path
                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
                    </SlottedSVG>
                </IcNavigationButton>
                <IcNavigationItem slot="navigation">
                    <Link href="/" slot="navigation-item">
                        Get started
                    </Link>
                </IcNavigationItem>
                <IcNavigationItem slot="navigation">
                    <Link href="/accessibility" slot="navigation-item">
                        Accessibility
                    </Link>
                </IcNavigationItem>
            </IcTopNavigation>
            <main>
                <p>Hi</p>
            </main>
        </>
    )
}

🖥 📱 Device

• Type: [e.g. Desktop, mobile]
• Device: [e.g. iPhone, MacBook, ThinkPad]
• OS version: [e.g. macOS13, iOS16, Android 13]
• Browser version: [e.g. Chrome 115, Safari 16]

🧐 Expected behaviour

No flash

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given When
Then

Additional info

We added some CSS to our project that seems to resolve it In globals.css add:

/* Don't display the page until it's hydrated to avoid flickering */
html:not(.hydrated) {
  display: none;
}

[GCHQ-Developer-299]

The issue doesn't occur in our NextJS storybooks (see a top nav with icons example) and the user has found a workaround in their case, so pushing this into Future Release

[MI6-255]

On hold until we have SSR functionality