feat: integrate loading state in QuotaPanel and update ModelProviderPage to handle workspace validation

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounce } from 'ahooks'
 import {
@@ -22,6 +22,7 @@ import { useProviderContext } from '@/context/provider-context'
 import cn from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import QuotaPanel from './provider-added-card/quota-panel'
+import { useAppContext } from '@/context/app-context'
 
 type Props = {
   searchText: string
@@ -32,6 +33,7 @@ const FixedModelProvider = ['langgenius/openai/openai', 'langgenius/anthropic/an
 const ModelProviderPage = ({ searchText }: Props) => {
   const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
+  const { mutateCurrentWorkspace, isValidatingCurrentWorkspace } = useAppContext()
   const { data: textGenerationDefaultModel } = useDefaultModel(ModelTypeEnum.textGeneration)
   const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
   const { data: rerankDefaultModel } = useDefaultModel(ModelTypeEnum.rerank)
@@ -40,6 +42,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
   const { modelProviders: providers } = useProviderContext()
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
   const defaultModelNotConfigured = !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
+
   const [configuredProviders, notConfiguredProviders] = useMemo(() => {
     const configuredProviders: ModelProvider[] = []
     const notConfiguredProviders: ModelProvider[] = []
@@ -82,6 +85,10 @@ const ModelProviderPage = ({ searchText }: Props) => {
     return [filteredConfiguredProviders, filteredNotConfiguredProviders]
   }, [configuredProviders, debouncedSearchText, notConfiguredProviders])
 
+  useEffect(() => {
+    mutateCurrentWorkspace()
+  }, [mutateCurrentWorkspace])
+
   return (
     <div className='relative -mt-2 pt-1'>
       <div className={cn('mb-2 flex items-center')}>
@@ -107,7 +114,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
           />
         </div>
       </div>
-      <QuotaPanel providers={providers}/>
+      <QuotaPanel providers={providers} isLoading={isValidatingCurrentWorkspace}/>
       {!filteredConfiguredProviders?.length && (
         <div className='mb-2 rounded-[10px] bg-workflow-process-bg p-4'>
           <div className='flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>

web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx

@@ -12,6 +12,7 @@ import InstallFromMarketplace from '@/app/components/plugins/install-plugin/inst
 import { useMarketplaceAllPlugins } from '../hooks'
 import { useBoolean } from 'ahooks'
 import useTimestamp from '@/hooks/use-timestamp'
+import Loading from '@/app/components/base/loading'
 
 const allProviders = [
   { key: ModelProviderQuotaGetPaid.OPENAI, Icon: OpenaiSmall },
@@ -33,9 +34,11 @@ const providerKeyToPluginId: Record<string, string> = {
 
 type QuotaPanelProps = {
   providers: ModelProvider[]
+  isLoading?: boolean
 }
 const QuotaPanel: FC<QuotaPanelProps> = ({
   providers,
+  isLoading = false,
 }) => {
   const { t } = useTranslation()
   const { currentWorkspace } = useAppContext()
@@ -74,6 +77,14 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
       }
     }
   }, [providers, isShowInstallModal, hideInstallFromMarketplace])
+  console.log('isLoading', isLoading)
+  if (isLoading) {
+    return (
+      <div className='my-2 flex min-h-[72px] items-center justify-center rounded-xl border-[0.5px] border-components-panel-border bg-third-party-model-bg-default shadow-xs'>
+        <Loading />
+      </div>
+    )
+  }
 
   return (
     <div className={cn('my-2 min-w-[72px] shrink-0 rounded-xl border-[0.5px] pb-2.5 pl-4 pr-2.5 pt-3 shadow-xs', credits <= 0 ? 'border-state-destructive-border hover:bg-state-destructive-hover' : 'border-components-panel-border bg-third-party-model-bg-default')}>

web/context/app-context.tsx

@@ -23,6 +23,7 @@ export type AppContextValue = {
   langGeniusVersionInfo: LangGeniusVersionResponse
   useSelector: typeof useSelector
   isLoadingCurrentWorkspace: boolean
+  isValidatingCurrentWorkspace: boolean
 }
 
 const userProfilePlaceholder = {
@@ -69,6 +70,7 @@ const AppContext = createContext<AppContextValue>({
   langGeniusVersionInfo: initialLangGeniusVersionInfo,
   useSelector,
   isLoadingCurrentWorkspace: false,
+  isValidatingCurrentWorkspace: false,
 })
 
 export function useSelector<T>(selector: (value: AppContextValue) => T): T {
@@ -81,7 +83,7 @@ export type AppContextProviderProps = {
 
 export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) => {
   const { data: userProfileResponse, mutate: mutateUserProfile, error: userProfileError } = useSWR({ url: '/account/profile', params: {} }, fetchUserProfile)
-  const { data: currentWorkspaceResponse, mutate: mutateCurrentWorkspace, isLoading: isLoadingCurrentWorkspace } = useSWR({ url: '/workspaces/current', params: {} }, fetchCurrentWorkspace)
+  const { data: currentWorkspaceResponse, mutate: mutateCurrentWorkspace, isLoading: isLoadingCurrentWorkspace, isValidating: isValidatingCurrentWorkspace } = useSWR({ url: '/workspaces/current', params: {} }, fetchCurrentWorkspace)
 
   const [userProfile, setUserProfile] = useState<UserProfileResponse>(userProfilePlaceholder)
   const [langGeniusVersionInfo, setLangGeniusVersionInfo] = useState<LangGeniusVersionResponse>(initialLangGeniusVersionInfo)
@@ -171,6 +173,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       isCurrentWorkspaceDatasetOperator,
       mutateCurrentWorkspace,
       isLoadingCurrentWorkspace,
+      isValidatingCurrentWorkspace,
     }}>
       <div className='flex h-full flex-col overflow-y-auto'>
         {globalThis.document?.body?.getAttribute('data-public-maintenance-notice') && <MaintenanceNotice />}