Fixes #4794: Fix marketplace blanking after populating

- Fixed state management issue in MarketplaceViewStateManager where displayItems was not properly initialized
- Improved handling of marketplace items when no filters are active to ensure all items are displayed
- Enhanced initial state loading logic to prevent infinite loops and ensure proper state updates
- Fixed getState method to fall back to allItems when displayItems is empty

The issue was caused by displayItems being set to an empty array when marketplace items were loaded,
even when no filters were applied. This caused the marketplace to appear blank after loading completed.

Author: roomote

webview-ui/src/components/marketplace/MarketplaceView.tsx

@@ -46,7 +46,9 @@ export function MarketplaceView({ stateManager, onDone }: MarketplaceViewProps)
 
 		// Listen for state changes to know when initial data arrives
 		const unsubscribe = manager.onStateChange((newState) => {
-			if (newState.allItems.length > 0 && !hasReceivedInitialState) {
+			// Mark as received initial state when we get any state update
+			// This prevents infinite loops and ensures proper state handling
+			if (!hasReceivedInitialState && (newState.allItems.length > 0 || newState.displayItems !== undefined)) {
 				setHasReceivedInitialState(true)
 			}
 		})

webview-ui/src/components/marketplace/MarketplaceViewStateManager.ts

@@ -97,7 +97,8 @@ export class MarketplaceViewStateManager {
 		// Only create new arrays if they exist and have items
 		const allItems = this.state.allItems.length ? [...this.state.allItems] : []
 		// Ensure displayItems is always an array, never undefined
-		const displayItems = this.state.displayItems ? [...this.state.displayItems] : []
+		// If displayItems is undefined or null, fall back to allItems
+		const displayItems = this.state.displayItems ? [...this.state.displayItems] : [...allItems]
 		const tags = this.state.filters.tags.length ? [...this.state.filters.tags] : []
 
 		// Create minimal new state object
@@ -170,11 +171,20 @@ export class MarketplaceViewStateManager {
 					break
 				}
 
+				// Calculate display items based on current filters
+				let newDisplayItems: MarketplaceItem[]
+				if (this.isFilterActive()) {
+					newDisplayItems = this.filterItems([...items])
+				} else {
+					// No filters active - show all items
+					newDisplayItems = [...items]
+				}
+
 				// Update allItems as source of truth
 				this.state = {
 					...this.state,
 					allItems: [...items],
-					displayItems: this.isFilterActive() ? this.filterItems([...items]) : [...items],
+					displayItems: newDisplayItems,
 					isFetching: false,
 				}
 
@@ -309,7 +319,17 @@ export class MarketplaceViewStateManager {
 				// Always use the marketplace items from the extension when they're provided
 				// This ensures fresh data is always displayed
 				const items = [...marketplaceItems]
-				const newDisplayItems = this.isFilterActive() ? this.filterItems(items) : items
+
+				// Calculate display items based on current filters
+				// If no filters are active, show all items
+				// If filters are active, apply filtering
+				let newDisplayItems: MarketplaceItem[]
+				if (this.isFilterActive()) {
+					newDisplayItems = this.filterItems(items)
+				} else {
+					// No filters active - show all items
+					newDisplayItems = items
+				}
 
 				// Update state in a single operation
 				this.state = {