fix: marketplace list

web/app/components/plugins/marketplace/context.tsx

@@ -41,6 +41,7 @@ export type MarketplaceContextValue = {
   setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void
   marketplaceCollectionPluginsMapFromClient?: Record<string, Plugin[]>
   setMarketplaceCollectionPluginsMapFromClient: (map: Record<string, Plugin[]>) => void
+  isLoading: boolean
 }
 
 export const MarketplaceContext = createContext<MarketplaceContextValue>({
@@ -60,6 +61,7 @@ export const MarketplaceContext = createContext<MarketplaceContextValue>({
   setMarketplaceCollectionsFromClient: () => {},
   marketplaceCollectionPluginsMapFromClient: {},
   setMarketplaceCollectionPluginsMapFromClient: () => {},
+  isLoading: false,
 })
 
 type MarketplaceContextProviderProps = {
@@ -88,12 +90,14 @@ export const MarketplaceContextProvider = ({
     marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapFromClient,
     setMarketplaceCollectionPluginsMap: setMarketplaceCollectionPluginsMapFromClient,
     queryMarketplaceCollectionsAndPlugins,
+    isLoading,
   } = useMarketplaceCollectionsAndPlugins()
   const {
     plugins,
     resetPlugins,
     queryPlugins,
     queryPluginsWithDebounced,
+    isLoading: isPluginsLoading,
   } = useMarketplacePlugins()
 
   const handleSearchPluginTextChange = useCallback((text: string) => {
@@ -194,6 +198,7 @@ export const MarketplaceContextProvider = ({
         setMarketplaceCollectionsFromClient,
         marketplaceCollectionPluginsMapFromClient,
         setMarketplaceCollectionPluginsMapFromClient,
+        isLoading: isLoading || isPluginsLoading,
       }}
     >
       {children}

web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -4,6 +4,7 @@ import type { MarketplaceCollection } from '../types'
 import { useMarketplaceContext } from '../context'
 import List from './index'
 import SortDropdown from '../sort-dropdown'
+import Loading from '@/app/components/base/loading'
 
 type ListWrapperProps = {
   marketplaceCollections: MarketplaceCollection[]
@@ -20,9 +21,10 @@ const ListWrapper = ({
   const plugins = useMarketplaceContext(v => v.plugins)
   const marketplaceCollectionsFromClient = useMarketplaceContext(v => v.marketplaceCollectionsFromClient)
   const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient)
+  const isLoading = useMarketplaceContext(v => v.isLoading)
 
   return (
-    <div className='flex flex-col grow px-12 py-2 bg-background-default-subtle'>
+    <div className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'>
       {
         plugins && (
           <div className='flex items-center mb-4 pt-3'>
@@ -32,13 +34,24 @@ const ListWrapper = ({
           </div>
         )
       }
-      <List
+      {
-        marketplaceCollections={marketplaceCollectionsFromClient || marketplaceCollections}
+        isLoading && (
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMapFromClient || marketplaceCollectionPluginsMap}
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
-        plugins={plugins}
+            <Loading />
-        showInstallButton={showInstallButton}
+          </div>
-        locale={locale}
+        )
-      />
+      }
+      {
+        !isLoading && (
+          <List
+            marketplaceCollections={marketplaceCollectionsFromClient || marketplaceCollections}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMapFromClient || marketplaceCollectionPluginsMap}
+            plugins={plugins}
+            showInstallButton={showInstallButton}
+            locale={locale}
+          />
+        )
+      }
     </div>
   )
 }

web/app/components/tools/marketplace/hooks.ts

@@ -5,6 +5,7 @@ import {
   useMarketplaceCollectionsAndPlugins,
   useMarketplacePlugins,
 } from '@/app/components/plugins/marketplace/hooks'
+import { PluginType } from '@/app/components/plugins/types'
 
 export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => {
   const {
@@ -25,18 +26,20 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     if (searchPluginText || filterPluginTags.length) {
       if (searchPluginText) {
         queryPluginsWithDebounced({
+          category: PluginType.tool,
           query: searchPluginText,
           tags: filterPluginTags,
         })
         return
       }
       queryPlugins({
+        category: PluginType.tool,
         query: searchPluginText,
         tags: filterPluginTags,
       })
     }
     else {
-      queryMarketplaceCollectionsAndPlugins()
+      queryMarketplaceCollectionsAndPlugins({ category: PluginType.tool })
       resetPlugins()
     }
   }, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins])