fix: resolve marketplace timeout issues and display installed MCPs (#4817)

- Separate marketplace data fetching from main state updates
- Add lazy loading for marketplace items to prevent UI freezes
- Fix marketplaceInstalledMetadata not being displayed correctly
- Add dedicated fetchMarketplaceData mechanism triggered only when needed
- Ensure marketplace timeouts don't block core functionality

This prevents the 'timeout of 10000ms exceeded' error and UI freezes in restricted network environments by fetching marketplace data asynchronously only when the marketplace tab is accessed.

Author: daniel-lxs

src/core/webview/ClineProvider.ts

@@ -1254,6 +1254,33 @@ export class ClineProvider
 		}
 	}
 
+	/**
+	 * Fetches marketplace data on demand to avoid blocking main state updates
+	 */
+	async fetchMarketplaceData() {
+		try {
+			const [marketplaceItems, marketplaceInstalledMetadata] = await Promise.all([
+				this.marketplaceManager.getCurrentItems().catch(() => []),
+				this.marketplaceManager.getInstallationMetadata().catch(() => ({ project: {}, global: {} })),
+			])
+
+			// Send marketplace data separately
+			this.postMessageToWebview({
+				type: "marketplaceData",
+				marketplaceItems: marketplaceItems || [],
+				marketplaceInstalledMetadata: marketplaceInstalledMetadata || { project: {}, global: {} },
+			})
+		} catch (error) {
+			console.error("Failed to fetch marketplace data:", error)
+			// Send empty data on error to prevent UI from hanging
+			this.postMessageToWebview({
+				type: "marketplaceData",
+				marketplaceItems: [],
+				marketplaceInstalledMetadata: { project: {}, global: {} },
+			})
+		}
+	}
+
 	/**
 	 * Checks if there is a file-based system prompt override for the given mode
 	 */
@@ -1342,13 +1369,10 @@ export class ClineProvider
 		const allowedCommands = vscode.workspace.getConfiguration(Package.name).get<string[]>("allowedCommands") || []
 		const cwd = this.cwd
 
-		// Fetch marketplace data
+		// Initialize marketplace data as empty - will be fetched on demand
 		let marketplaceItems: any[] = []
 		let marketplaceInstalledMetadata: any = { project: {}, global: {} }
 
-		marketplaceItems = (await this.marketplaceManager.getCurrentItems()) || []
-		marketplaceInstalledMetadata = await this.marketplaceManager.getInstallationMetadata()
-
 		// Check if there's a system prompt override for the current mode
 		const currentMode = mode ?? defaultModeSlug
 		const hasSystemPromptOverride = await this.hasFileBasedSystemPromptOverride(currentMode)

src/core/webview/webviewMessageHandler.ts

@@ -1508,6 +1508,12 @@ export const webviewMessageHandler = async (
 			break
 		}
 
+		case "fetchMarketplaceData": {
+			// Fetch marketplace data on demand
+			await provider.fetchMarketplaceData()
+			break
+		}
+
 		case "installMarketplaceItem": {
 			if (marketplaceManager && message.mpItem && message.mpInstallOptions) {
 				try {

src/shared/ExtensionMessage.ts

@@ -90,6 +90,7 @@ export interface ExtensionMessage {
 		| "indexCleared"
 		| "codebaseIndexConfig"
 		| "marketplaceInstallResult"
+		| "marketplaceData"
 	text?: string
 	payload?: any // Add a generic payload for now, can refine later
 	action?:
@@ -136,6 +137,8 @@ export interface ExtensionMessage {
 	userInfo?: CloudUserInfo
 	organizationAllowList?: OrganizationAllowList
 	tab?: string
+	marketplaceItems?: MarketplaceItem[]
+	marketplaceInstalledMetadata?: { project: Record<string, any>; global: Record<string, any> }
 }
 
 export type ExtensionState = Pick<

src/shared/WebviewMessage.ts

@@ -167,6 +167,7 @@ export interface WebviewMessage {
 		| "cancelMarketplaceInstall"
 		| "removeInstalledMarketplaceItem"
 		| "marketplaceInstallResult"
+		| "fetchMarketplaceData"
 		| "switchTab"
 	text?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"

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

@@ -33,14 +33,9 @@ export function MarketplaceView({ stateManager, onDone }: MarketplaceViewProps)
 		// a filter message with empty filters, which will cause the extension to
 		// send back the full state including all marketplace items.
 		if (!hasReceivedInitialState && state.allItems.length === 0) {
-			// Send empty filter to trigger state update
+			// Fetch marketplace data on demand
 			vscode.postMessage({
-				type: "filterMarketplaceItems",
-				filters: {
-					type: "",
-					search: "",
-					tags: [],
-				},
+				type: "fetchMarketplaceData",
 			})
 		}
 

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

@@ -341,5 +341,28 @@ export class MarketplaceViewStateManager {
 				void this.transition({ type: "FETCH_ITEMS" })
 			}
 		}
+
+		// Handle marketplace data updates (fetched on demand)
+		if (message.type === "marketplaceData") {
+			const marketplaceItems = message.marketplaceItems
+
+			if (marketplaceItems !== undefined) {
+				// 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
+
+				// Update state in a single operation
+				this.state = {
+					...this.state,
+					isFetching: false,
+					allItems: items,
+					displayItems: newDisplayItems,
+				}
+			}
+
+			// Notify state change
+			this.notifyStateChange()
+		}
 	}
 }

webview-ui/src/context/ExtensionStateContext.tsx

@@ -42,6 +42,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setCondensingApiConfigId: (value: string) => void
 	customCondensingPrompt?: string
 	setCustomCondensingPrompt: (value: string) => void
+	marketplaceItems?: any[]
+	marketplaceInstalledMetadata?: { project: Record<string, any>; global: Record<string, any> }
 	setApiConfiguration: (config: ProviderSettings) => void
 	setCustomInstructions: (value?: string) => void
 	setAlwaysAllowReadOnly: (value: boolean) => void
@@ -217,6 +219,11 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 	const [mcpServers, setMcpServers] = useState<McpServer[]>([])
 	const [currentCheckpoint, setCurrentCheckpoint] = useState<string>()
 	const [extensionRouterModels, setExtensionRouterModels] = useState<RouterModels | undefined>(undefined)
+	const [marketplaceItems, setMarketplaceItems] = useState<any[]>([])
+	const [marketplaceInstalledMetadata, setMarketplaceInstalledMetadata] = useState<{
+		project: Record<string, any>
+		global: Record<string, any>
+	}>({ project: {}, global: {} })
 
 	const setListApiConfigMeta = useCallback(
 		(value: ProviderSettingsEntry[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })),
@@ -242,6 +249,13 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					setState((prevState) => mergeExtensionState(prevState, newState))
 					setShowWelcome(!checkExistKey(newState.apiConfiguration))
 					setDidHydrateState(true)
+					// Handle marketplace data if present in state message
+					if (newState.marketplaceItems !== undefined) {
+						setMarketplaceItems(newState.marketplaceItems)
+					}
+					if (newState.marketplaceInstalledMetadata !== undefined) {
+						setMarketplaceInstalledMetadata(newState.marketplaceInstalledMetadata)
+					}
 					break
 				}
 				case "theme": {
@@ -288,6 +302,15 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					setExtensionRouterModels(message.routerModels)
 					break
 				}
+				case "marketplaceData": {
+					if (message.marketplaceItems !== undefined) {
+						setMarketplaceItems(message.marketplaceItems)
+					}
+					if (message.marketplaceInstalledMetadata !== undefined) {
+						setMarketplaceInstalledMetadata(message.marketplaceInstalledMetadata)
+					}
+					break
+				}
 			}
 		},
 		[setListApiConfigMeta],
@@ -320,6 +343,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		screenshotQuality: state.screenshotQuality,
 		routerModels: extensionRouterModels,
 		cloudIsAuthenticated: state.cloudIsAuthenticated ?? false,
+		marketplaceItems,
+		marketplaceInstalledMetadata,
 		setExperimentEnabled: (id, enabled) =>
 			setState((prevState) => ({ ...prevState, experiments: { ...prevState.experiments, [id]: enabled } })),
 		setApiConfiguration,