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

web/app/components/plugins/plugin-page/context.tsx

@@ -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,

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -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} />