Empty the preview sites bar while usage is loading

apps/ui/src/components/settings-view/usage-panel.test.tsx

@@ -222,14 +222,24 @@ describe( 'UsagePanel', () => {
 		expect( deleteSnapshotsMutate ).not.toHaveBeenCalled();
 	} );
 
-	it( 'shows a loading row with a progress bar in both sections', () => {
+	it( 'shows a loading row with an empty progress bar in both sections', () => {
 		useStudioAssistantQuotaMock.mockReturnValue( { data: undefined, isLoading: true } as never );
-		useSnapshotUsageMock.mockReturnValue( { data: undefined, isLoading: true } as never );
+		// Preview usage is still cached from before the delete, so the bar would
+		// otherwise keep its old fill next to a "Loading..." row.
+		useDeleteAllSnapshotsMock.mockReturnValue( {
+			mutate: deleteSnapshotsMutate,
+			isPending: true,
+			error: null,
+		} as never );
 
 		render( <UsagePanel /> );
 
 		expect( screen.getAllByText( 'Loading...' ) ).toHaveLength( 2 );
-		expect( screen.getAllByTestId( 'usage-progress-bar' ) ).toHaveLength( 2 );
+		const bars = screen.getAllByTestId( 'usage-progress-bar' );
+		expect( bars ).toHaveLength( 2 );
+		for ( const bar of bars ) {
+			expect( bar.firstElementChild ).toHaveStyle( { inlineSize: '0%' } );
+		}
 	} );
 
 	it( 'replaces figures and actions with the offline notice while offline', () => {

apps/ui/src/components/settings-view/usage-panel.tsx

@@ -113,7 +113,9 @@ function PreviewSitesSummary( { userId }: { userId: number } ) {
 	const snapshotCreationBlocked = snapshotUsage?.siteCreationBlocked ?? false;
 	const isLoadingPreviewUsage = isLoading || isLoadingSnapshotUsage || deleteAllSnapshots.isPending;
 	const isDisabled = siteCount === 0 || snapshotCreationBlocked || isLoadingPreviewUsage;
-	const fraction = clampQuotaFraction( siteCount, siteLimit );
+	// Empty while loading: a bar still filled from the previous figure would
+	// contradict the "Loading..." row next to it.
+	const fraction = isLoadingPreviewUsage ? 0 : clampQuotaFraction( siteCount, siteLimit );
 	const deletePreviewSitesLabel = deleteAllSnapshots.isPending
 		? __( 'Deleting preview sites...' )
 		: __( 'Delete all preview sites' );