opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add loading state for installed plugin list in context and update PluginsPanel to display loading indicator

This commit is contained in:
twwu 2024-11-06 18:43:27 +08:00
parent a7e320dc25
commit 92153328ea
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/plugins/plugin-page/context.tsx
View File

@ -27,6 +27,7 @@ export type PluginPageContextValue = {
setCurrentPluginDetail: (plugin: PluginDetail) => void
installedPluginList: PluginDetail[]
mutateInstalledPluginList: () => void
isPluginListLoading: boolean
filters: FilterState
setFilters: (filter: FilterState) => void
activeTab: string
@ -45,6 +46,7 @@ export const PluginPageContext = createContext<PluginPageContextValue>({
setCurrentPluginDetail: () => {},
installedPluginList: [],
mutateInstalledPluginList: () => {},
isPluginListLoading: true,
filters: {
categories: [],
tags: [],
@ -78,7 +80,7 @@ export const PluginPageContextProvider = ({
tags: [],
searchQuery: '',
})
const { data, mutate: mutateInstalledPluginList } = useSWR({ url: '/workspaces/current/plugin/list' }, fetchInstalledPluginList)
const { data, mutate: mutateInstalledPluginList, isLoading: isPluginListLoading } = useSWR({ url: '/workspaces/current/plugin/list' }, fetchInstalledPluginList)
const [currentPluginDetail, setCurrentPluginDetail] = useState<PluginDetail | undefined>()
const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
@ -106,6 +108,7 @@ export const PluginPageContextProvider = ({
setCurrentPluginDetail,
installedPluginList: data?.plugins || [],
mutateInstalledPluginList,
isPluginListLoading,
filters,
setFilters,
activeTab,

4
web/app/components/plugins/plugin-page/plugins-panel.tsx
View File

@ -8,10 +8,12 @@ import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
import { usePluginPageContext } from './context'
import { useDebounceFn } from 'ahooks'
import Empty from './empty'
import Loading from '../../base/loading'
const PluginsPanel = () => {
const [filters, setFilters] = usePluginPageContext(v => [v.filters, v.setFilters]) as [FilterState, (filter: FilterState) => void]
const pluginList = usePluginPageContext(v => v.installedPluginList) as PluginDetail[]
const isPluginListLoading = usePluginPageContext(v => v.isPluginListLoading)
const mutateInstalledPluginList = usePluginPageContext(v => v.mutateInstalledPluginList)
const { run: handleFilterChange } = useDebounceFn((filters: FilterState) => {
@ -38,7 +40,7 @@ const PluginsPanel = () => {
onFilterChange={handleFilterChange}
/>
</div>
{filteredList.length > 0 ? (
{isPluginListLoading ? <Loading type='app' /> : filteredList.length > 0 ? (
<div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
<div className='w-full'>
<List pluginList={filteredList} />