Hi, I‘m trying to render a component depending on the user agent. If the user agent is flutter, I want to hide the component. This works fine.

The problem is that the component flickers on other user agents than flutter because the user agent is requested delayed (so the component appears some milliseconds later on the page). How to prevent the flickering so that the component is rendered without the user noticing?

import React, { useEffect, useState } from "react";
// ... Imports ...

export default function Header({ fixed }) {
    const [isInApp, setIsInApp] = useState(null); 
    const { t } = useTranslation("common");
    const { user, isLoggedIn, hasRole } = useUser();
    const router = useRouter();

    useEffect(() => {
        if (typeof navigator !== "undefined") {
            const isFlutter = navigator.userAgent.includes("Flutter");
            setIsInApp(isFlutter);
        }
    }, []);

    if (isInApp === null && typeof window === "undefined") {
        return null;
    }

    if (isInApp === true) {
        return null;
    }

    return (
        <header className={`${fixed ? "sticky-header" : ""}`}>
            lt ... */}
        </header>
    );
}