Why does TopNavigation grow as the page loads?

[pcolmer]

Untitled.video.mp4

I've created a much slowed-down video of this happening. The TopNavigation component is defined as follows:

    <TopNavigation
      identity={{
        href: "/",
        title: "Linaro Solutions Hub",
        logo: {
          src: "/images/Linaro_logo.png",
          alt: "Service",
        },
        onFollow: (e) => {
          e.preventDefault();
          router.push("/");
        },
      }}
      utilities={
        userSubscription.isLoading
          ? []
          : [
              {
                type: "menu-dropdown",
                iconName: "user-profile",
                text: username,
                items: [
                  ...(status === "authenticated" && !session.isAnonymous
                    ? [
                        { id: "token", text: "View token" },
                        { id: "signout", text: "Sign out" },
                      ]
                    : [{ id: "signin", text: "Sign In" }]),
                ],
                onItemClick: handleItemClick,
              },
            ]
      }
      i18nStrings={{
        searchIconAriaLabel: "Search",
        searchDismissIconAriaLabel: "Close search",
        overflowMenuTriggerText: "More",
      }}
    />

and is used within an App() function that declares the navigation component followed by a component for the rest of the page.

[connorlanigan]

Hi Philip, thanks for reaching out.
My guess is that you're server-side rendering the Top Navigation and hydrating it on the client, can you confirm whether that is the case?
The Top Navigation component changes its size and layout depending on the available space. This includes showing & hiding different items on the bar, but also applying different padding sizes to make sure it fits well. This measurement and calculation is currently being performed at runtime in the browser, so that it reacts appropriately when the viewport changes. When the Top Navigation is pre-rendered on the server, the dimensions of the viewport are not available, and you get a default size. As soon as the application is then hydrated in the browser, the dimensions are calculated, which can lead to a change in the component's appearance.

If you're currently using server-side rendering in your application, I would recommend to disable server-side rendering for at least this component (or larger parts / all of your application), and rendering it only on the client. Some frameworks already offer options for that (e.g. NextJS with the ssr flag of its dynamic import), or you can use a useEffect hook to start rendering the children on the client. Let us know if we can help further.

[pcolmer]

Thank you - we are using SSR. Disabling it has cleared the problem.