apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-03 19:25:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update copilot action cards loading states

Browse source
This commit is contained in:
akhisud3195 2025-08-26 22:27:58 +05:30
parent 1cf8bd01de
commit ec40873212
1 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

28
apps/rowboat/app/projects/[projectId]/copilot/components/actions.tsx
View file

@ -1,5 +1,5 @@
'use client';
import { createContext, useContext, useRef, useState } from "react";
import { createContext, useContext, useRef, useState, useEffect } from "react";
import clsx from "clsx";
import { z } from "zod";
import { CopilotAssistantMessageActionPart } from "../../../../../src/entities/models/copilot";
@ -384,6 +384,17 @@ export function StreamingAction({
};
loading: boolean;
}) {
const [loadingStage, setLoadingStage] = useState<'fetching' | 'configuring'>('fetching');
// After 3 seconds, switch to "configuring" stage
useEffect(() => {
const timer = setTimeout(() => {
setLoadingStage('configuring');
}, 3000);
return () => clearTimeout(timer);
}, []);
// Use the same card container and header style as Action
return (
<div className={clsx(
@ -416,7 +427,20 @@ export function StreamingAction({
{/* Loading state body */}
<div className="px-3 py-4 text-xs text-zinc-500 dark:text-zinc-400 flex items-center gap-2 min-h-[32px]">
<Spinner size="sm" />
<span>Loading...</span>
<span className="animate-pulse">
{loadingStage === 'fetching'
? (action.config_type === 'agent'
? `Creating agent...`
: action.config_type === 'pipeline'
? `Creating pipeline...`
: `Fetching ${action.config_type} definition...`)
: (action.config_type === 'agent'
? `Configuring agent...`
: action.config_type === 'pipeline'
? `Configuring pipeline...`
: `Configuring ${action.config_type}...`)
}
</span>
</div>
</div>
);