diff --git a/web/app/components/plugins/marketplace/list/__tests__/list-wrapper.spec.tsx b/web/app/components/plugins/marketplace/list/__tests__/list-wrapper.spec.tsx
index 7901b175877..07004b610e6 100644
--- a/web/app/components/plugins/marketplace/list/__tests__/list-wrapper.spec.tsx
+++ b/web/app/components/plugins/marketplace/list/__tests__/list-wrapper.spec.tsx
@@ -101,4 +101,14 @@ describe('ListWrapper', () => {
expect(screen.getAllByTestId('loading')).toHaveLength(1)
})
+
+ it('keeps the supplied layout constraint while category results are loading', () => {
+ mockMarketplaceData.isLoading = true
+ mockMarketplaceData.page = 1
+
+ const { container } = render(
)
+
+ expect(container.firstElementChild).toHaveClass('catalog-content-min-height')
+ expect(screen.getByTestId('loading')).toBeInTheDocument()
+ })
})
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index 63a1debe9db..4a6a10d4dd5 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -1,4 +1,5 @@
'use client'
+import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from '#i18n'
import Loading from '@/app/components/base/loading'
import SortDropdown from '../sort-dropdown'
@@ -6,10 +7,15 @@ import { useMarketplaceData } from '../state'
import List from './index'
type ListWrapperProps = {
+ className?: string
showInstallButton?: boolean
linkToMarketplaceDetail?: boolean
}
-const ListWrapper = ({ showInstallButton, linkToMarketplaceDetail }: ListWrapperProps) => {
+const ListWrapper = ({
+ className,
+ showInstallButton,
+ linkToMarketplaceDetail,
+}: ListWrapperProps) => {
const { t } = useTranslation()
const {
@@ -28,7 +34,10 @@ const ListWrapper = ({ showInstallButton, linkToMarketplaceDetail }: ListWrapper
scrollbarGutter: 'stable',
paddingBottom: 'calc(0.5rem + var(--marketplace-header-collapse-offset, 0px))',
}}
- className="relative flex grow flex-col bg-background-default-subtle px-8 py-2"
+ className={cn(
+ 'relative flex grow flex-col bg-background-default-subtle px-8 py-2',
+ className,
+ )}
>
{plugins && (
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index ec94734142b..d0fa9471c95 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -86,7 +86,7 @@ function PluginTypeSwitch({ className, variant = 'default' }: PluginTypeSwitchPr
isHero
? 'flex shrink-0 items-center gap-1 overflow-x-auto'
: isHome
- ? 'flex w-full shrink-0 items-center justify-start gap-1 overflow-x-auto'
+ ? 'flex w-full shrink-0 scrollbar-none items-center justify-start gap-1 overflow-x-auto'
: 'flex shrink-0 items-center justify-center space-x-2 bg-background-body py-3',
className,
)}
@@ -106,7 +106,7 @@ function PluginTypeSwitch({ className, variant = 'default' }: PluginTypeSwitchPr
isHero
? 'text-text-primary-on-surface'
: isHome
- ? cn('min-w-12 justify-center text-text-tertiary', styles.homeItem)
+ ? cn('min-w-12 shrink-0 justify-center text-text-tertiary', styles.homeItem)
: 'text-text-tertiary',
!isActive &&
(isHero
diff --git a/web/app/components/plugins/marketplace/search-params.ts b/web/app/components/plugins/marketplace/search-params.ts
index 9538543ea40..515899f9a5c 100644
--- a/web/app/components/plugins/marketplace/search-params.ts
+++ b/web/app/components/plugins/marketplace/search-params.ts
@@ -8,7 +8,7 @@ export const marketplaceSearchParamsParsers = {
Object.values(PLUGIN_TYPE_SEARCH_MAP) as ActivePluginType[],
)
.withDefault('all')
- .withOptions({ history: 'replace', clearOnDefault: false }),
+ .withOptions({ history: 'replace', clearOnDefault: false, scroll: false }),
q: parseAsString.withDefault('').withOptions({ history: 'replace' }),
tags: parseAsArrayOf(parseAsString).withDefault([]).withOptions({ history: 'replace' }),
}