From 2be4489d1873ea5635da373e788c8a9471b5a3bb Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 17 Aug 2025 16:53:48 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20unify=20skeleton=20loading?=
 =?UTF-8?q?=20behavior=20for=20Midjourney=20logs=20actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Introduced `useMinimumLoadingTime` to `MjLogsActions.jsx`, guaranteeing a minimum skeleton display duration for smoother UX
• Refactored loading state UI to use wrapped `Skeleton` with placeholder, matching the implementation in `UsageLogsActions.jsx`
• Kept existing banner, admin checks, and compact-mode toggle intact while streamlining the code
• Ensures consistent loading indicators across usage- and MJ-log tables
---
 .../table/mj-logs/MjLogsActions.jsx           | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/web/src/components/table/mj-logs/MjLogsActions.jsx b/web/src/components/table/mj-logs/MjLogsActions.jsx
index b924c36a..06ced53e 100644
--- a/web/src/components/table/mj-logs/MjLogsActions.jsx
+++ b/web/src/components/table/mj-logs/MjLogsActions.jsx
@@ -19,6 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Skeleton, Typography } from '@douyinfe/semi-ui';
+import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
 import { IconEyeOpened } from '@douyinfe/semi-icons';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
@@ -32,26 +33,28 @@ const MjLogsActions = ({
   setCompactMode,
   t,
 }) => {
+  const showSkeleton = useMinimumLoadingTime(loading);
+
+  const placeholder = (
+    <div className="flex items-center text-orange-500 mb-2 md:mb-0">
+      <IconEyeOpened className="mr-2" />
+      <Skeleton.Title style={{ width: 300, height: 21, borderRadius: 6 }} />
+    </div>
+  );
+
   return (
     <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
-      <div className="flex items-center text-orange-500 mb-2 md:mb-0">
-        <IconEyeOpened className="mr-2" />
-        {loading ? (
-          <Skeleton.Title
-            style={{
-              width: 300,
-              marginBottom: 0,
-              marginTop: 0
-            }}
-          />
-        ) : (
+      <Skeleton loading={showSkeleton} active placeholder={placeholder}>
+        <div className="flex items-center text-orange-500 mb-2 md:mb-0">
+          <IconEyeOpened className="mr-2" />
           <Text>
             {isAdminUser && showBanner
               ? t('当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。')
               : t('Midjourney 任务记录')}
           </Text>
-        )}
-      </div>
+        </div>
+      </Skeleton>
+
       <CompactModeToggle
         compactMode={compactMode}
         setCompactMode={setCompactMode}