fix: improve loading state handling and conditional rendering in PluginsPanel

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 ? (
+      {!isPluginListLoading && (
-        <div className='flex grow flex-wrap content-start items-start justify-center gap-2 self-stretch px-12'>
+        <>
-          <div className='w-full'>
+          {(filteredList?.length ?? 0) > 0 ? (
-            <List pluginList={filteredList || []} />
+            <div className='flex grow flex-wrap content-start items-start justify-center gap-2 self-stretch px-12'>
-          </div>
+              <div className='w-full'>
-          {!isLastPage && !isFetching && (
+                <List pluginList={filteredList || []} />
-            <Button onClick={loadNextPage}>
+              </div>
-              {t('workflow.common.loadMore')}
+              {!isLastPage && !isFetching && (
-            </Button>
+                <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}