✨ 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 React from 'react';
|
||||||
import { Skeleton, Typography } from '@douyinfe/semi-ui';
|
import { Skeleton, Typography } from '@douyinfe/semi-ui';
|
||||||
|
import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
|
||||||
import { IconEyeOpened } from '@douyinfe/semi-icons';
|
import { IconEyeOpened } from '@douyinfe/semi-icons';
|
||||||
import CompactModeToggle from '../../common/ui/CompactModeToggle';
|
import CompactModeToggle from '../../common/ui/CompactModeToggle';
|
||||||
|
|
||||||
@@ -32,26 +33,28 @@ const MjLogsActions = ({
|
|||||||
setCompactMode,
|
setCompactMode,
|
||||||
t,
|
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 (
|
return (
|
||||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
|
<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">
|
<Skeleton loading={showSkeleton} active placeholder={placeholder}>
|
||||||
<IconEyeOpened className="mr-2" />
|
<div className="flex items-center text-orange-500 mb-2 md:mb-0">
|
||||||
{loading ? (
|
<IconEyeOpened className="mr-2" />
|
||||||
<Skeleton.Title
|
|
||||||
style={{
|
|
||||||
width: 300,
|
|
||||||
marginBottom: 0,
|
|
||||||
marginTop: 0
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text>
|
<Text>
|
||||||
{isAdminUser && showBanner
|
{isAdminUser && showBanner
|
||||||
? t('当前未开启Midjourney回调,部分项目可能无法获得绘图结果,可在运营设置中开启。')
|
? t('当前未开启Midjourney回调,部分项目可能无法获得绘图结果,可在运营设置中开启。')
|
||||||
: t('Midjourney 任务记录')}
|
: t('Midjourney 任务记录')}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</Skeleton>
|
||||||
|
|
||||||
<CompactModeToggle
|
<CompactModeToggle
|
||||||
compactMode={compactMode}
|
compactMode={compactMode}
|
||||||
setCompactMode={setCompactMode}
|
setCompactMode={setCompactMode}
|
||||||
|
|||||||
Reference in New Issue
Block a user