I have a page with tabs. On the initial load, I correctly get the streaming skeleton. But, when the user switches the tab, the UI gets stuck for a couple of seconds and directly switches to the new component without instant loading. Am I doing something wrong?

Tabs are changed via searchParams ?tab=<something>

Sample code:

'use server';

async function MyMainComponent({ searchParams }: { searchParams: Promise<{ tab: string }> }) {
    const { tab } = await searchParams;

    return (
        <div>
            <h1>My Main Component</h1>
            <TabsNav />
            {tab === 'some-tab' && (
                <Suspense fallback={<div>Loading...</div>}>
                    <SomeExpensiveComponent />
                </Suspense>
            )}
            {tab === 'some-other-tab' && (
                <Suspense fallback={<div>Loading...</div>}>
                    <SomeOtherExpensiveComponent />
                </Suspense>
            )}
        </div>
    );
}