✨ 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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user