sk/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(UI): More progress detail

Browse source
This commit is contained in:
Willie Zutz 2025-05-25 14:51:21 -06:00
parent 8ce50b48f0
commit a5cd2fa089
3 changed files with 281 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/MessageBoxLoading.tsx
View file

@ -3,6 +3,7 @@ interface MessageBoxLoadingProps {
message: string;
current: number;
total: number;
subMessage?: string;
} | null;
}
@ -12,12 +13,22 @@ const MessageBoxLoading = ({ progress }: MessageBoxLoadingProps) => {
{progress && progress.current !== progress.total ? (
<div className="bg-light-primary dark:bg-dark-primary rounded-lg p-4">
<div className="flex flex-col space-y-3">
<p className="text-sm text-black/70 dark:text-white/70">
<p className="text-base font-semibold text-black dark:text-white">
{progress.message}
</p>
{progress.subMessage && (
<p
className="text-xs text-black/40 dark:text-white/40 mt-1"
title={progress.subMessage}
>
{progress.subMessage}
</p>
)}
<div className="w-full bg-light-secondary dark:bg-dark-secondary rounded-full h-2 overflow-hidden">
<div
className="h-full bg-[#24A0ED] transition-all duration-300 ease-in-out"
className={`h-full bg-[#24A0ED] transition-all duration-300 ease-in-out ${
progress.current === progress.total ? '' : 'animate-pulse'
}`}
style={{
width: `${(progress.current / progress.total) * 100}%`,
}}