Flickering state render

[waxen hornet]

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>
    );
}

[modern crown]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[waxen hornet]

Still Needing help

[uncut ice]

there is ideally no best way than this