Unexpected Behavior with loading.tsx and Lazy-Loaded Components Using dynamic()

[programming-with-ia]

Unexpected Behavior with loading.tsx and Lazy-Loaded Components Using dynamic()

When utilizing a loading.tsx file at the root of a route alongside lazy-loaded components via dynamic() (from next/dynamic), I observed an unexpected behavior:

All child elements passed from the page.tsx file are temporarily assigned display: none !important; until the lazy-loaded component is fully loaded. This causes them to be hidden during the loading phase, which may not be the intended outcome.

Environment:

• Next.js version: 15.1.0

[programming-with-ia]

currently i am handling that issue like this.

function Wrapper({ children }: React.ComponentPropsWithRef<"div">) {
    useEffect(() => {
        const element = document.getElementById("lazy-load-fix");
        if (!element) return;
        console.log("observing...", element);
        const observer = new MutationObserver(() => {
            element.style.display = "unset";
        });

        observer.observe(element, {
            attributes: true,
            attributeFilter: ["style"],
        });

        return () => observer.disconnect();
    }, []);
    return (
        <div id="lazy-load-fix" className="!contents">
            {children}
        </div>
    );
}