feat: unify skeleton loading behavior for Midjourney logs actions

• 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
This commit is contained in:
t0ng7u
2025-08-17 16:53:48 +08:00
parent d34e4f1f28
commit 2be4489d18

View File

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