diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx index 4c5752d45b..6dabfdf736 100644 --- a/web/app/components/plugins/marketplace/context.tsx +++ b/web/app/components/plugins/marketplace/context.tsx @@ -41,6 +41,7 @@ export type MarketplaceContextValue = { setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void marketplaceCollectionPluginsMapFromClient?: Record setMarketplaceCollectionPluginsMapFromClient: (map: Record) => void + isLoading: boolean } export const MarketplaceContext = createContext({ @@ -60,6 +61,7 @@ export const MarketplaceContext = createContext({ 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} diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx index 50f4c5d244..936cb7ec57 100644 --- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx +++ b/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 ( -
+
{ plugins && (
@@ -32,13 +34,24 @@ const ListWrapper = ({
) } - + { + isLoading && ( +
+ +
+ ) + } + { + !isLoading && ( + + ) + }
) } diff --git a/web/app/components/tools/marketplace/hooks.ts b/web/app/components/tools/marketplace/hooks.ts index 5d27e10043..45cbd8a389 100644 --- a/web/app/components/tools/marketplace/hooks.ts +++ b/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])