Remove quick blink when starting Studio onboarding

src/components/app.tsx

@@ -19,11 +19,14 @@ import { Onboarding } from 'src/modules/onboarding';
 import { useOnboarding } from 'src/modules/onboarding/hooks/use-onboarding';
 import { UserSettings } from 'src/modules/user-settings';
 import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
+import { useRootSelector } from 'src/stores';
+import { selectOnboardingLoading } from 'src/stores/onboarding-slice';
 import 'src/index.css';
 
 export default function App() {
 	useLocalizationSupport();
 	const { needsOnboarding } = useOnboarding();
+	const isOnboardingLoading = useRootSelector( selectOnboardingLoading );
 	const { isSidebarVisible, toggleSidebar } = useSidebarVisibility();
 	const { showWhatsNew, closeWhatsNew } = useWhatsNew();
 	const { sites: localSites, loadingSites } = useSiteDetails();
@@ -33,6 +36,10 @@ export default function App() {
 		void getIpcApi().setupAppMenu( { needsOnboarding } );
 	}, [ needsOnboarding ] );
 
+	if ( isOnboardingLoading ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ needsOnboarding || isEmpty ? (

src/components/tests/app.test.tsx

@@ -17,6 +17,9 @@ import { wordpressVersionsApi } from 'src/stores/wordpress-versions-api';
 import { wpcomApi, wpcomPublicApi } from 'src/stores/wpcom-api';
 
 jest.mock( 'src/index.css', () => ( {} ) );
+jest.mock( 'src/stores/onboarding-slice', () => ( {
+	selectOnboardingLoading: jest.fn().mockReturnValue( false ),
+} ) );
 jest.mock( 'src/modules/onboarding/hooks/use-onboarding' );
 jest.mock( 'src/hooks/use-site-details' );
 jest.mock( 'src/modules/whats-new/hooks/use-whats-new', () => ( {

src/stores/onboarding-slice.ts

@@ -9,7 +9,7 @@ interface OnboardingState {
 
 const initialState: OnboardingState = {
 	completed: false,
-	loading: false,
+	loading: true,
 };
 
 // Async thunk to load onboarding status

src/stores/tests/onboarding-slice.test.ts

@@ -37,7 +37,7 @@ describe( 'onboarding-slice', () => {
 		it( 'should have correct initial state', () => {
 			const state = store.getState();
 			expect( selectOnboardingCompleted( state ) ).toBe( false );
-			expect( selectOnboardingLoading( state ) ).toBe( false );
+			expect( selectOnboardingLoading( state ) ).toBe( true );
 		} );
 	} );
 
@@ -174,9 +174,9 @@ describe( 'onboarding-slice', () => {
 		} );
 
 		it( 'should select onboarding loading state correctly', () => {
-			// Initial state should be false
+			// Initial state should be true
 			let state = store.getState();
-			expect( selectOnboardingLoading( state ) ).toBe( false );
+			expect( selectOnboardingLoading( state ) ).toBe( true );
 
 			// Mock the API to trigger loading state
 			mockIpcApi.getOnboardingData.mockResolvedValue( true );