From 1c032939c160c0fa4ae54b4a472b891513619161 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 21 Jul 2025 13:59:56 +0800
Subject: [PATCH] fix: improve loading state handling and conditional rendering
 in PluginsPanel

---
 .../plugins/plugin-page/plugins-panel.tsx     | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/app/components/plugins/plugin-page/plugins-panel.tsx b/web/app/components/plugins/plugin-page/plugins-panel.tsx
index df41153f52..ef4911e523 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel.tsx
@@ -70,20 +70,24 @@ const PluginsPanel = () => {
         />
       </div>
       {isPluginListLoading && <Loading type='app' />}
-      {!isPluginListLoading && (filteredList?.length ?? 0) > 0 ? (
-        <div className='flex grow flex-wrap content-start items-start justify-center gap-2 self-stretch px-12'>
-          <div className='w-full'>
-            <List pluginList={filteredList || []} />
-          </div>
-          {!isLastPage && !isFetching && (
-            <Button onClick={loadNextPage}>
-              {t('workflow.common.loadMore')}
-            </Button>
+      {!isPluginListLoading && (
+        <>
+          {(filteredList?.length ?? 0) > 0 ? (
+            <div className='flex grow flex-wrap content-start items-start justify-center gap-2 self-stretch px-12'>
+              <div className='w-full'>
+                <List pluginList={filteredList || []} />
+              </div>
+              {!isLastPage && !isFetching && (
+                <Button onClick={loadNextPage}>
+                  {t('workflow.common.loadMore')}
+                </Button>
+              )}
+              {isFetching && <div className='system-md-semibold text-text-secondary'>{t('appLog.detail.loading')}</div>}
+            </div>
+          ) : (
+            <Empty />
           )}
-          {isFetching && <div className='system-md-semibold text-text-secondary'>{t('appLog.detail.loading')}</div>}
-        </div>
-      ) : (
-        <Empty />
+        </>
       )}
       <PluginDetailPanel
         detail={currentPluginDetail}