Render loading and error states in PromptsScreen
Show a loader when GetPromptState status is "pending" and a red alert when status is "error". Add Loading and WithError stories. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
88a84b5547
commit
bb46339cf0
2 changed files with 45 additions and 1 deletions
|
|
@ -91,6 +91,26 @@ export const WithResult: Story = {
|
|||
},
|
||||
};
|
||||
|
||||
export const Loading: Story = {
|
||||
args: {
|
||||
prompts: samplePrompts,
|
||||
selectedPromptName: "translate",
|
||||
getPromptState: { status: "pending" },
|
||||
},
|
||||
};
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
prompts: samplePrompts,
|
||||
selectedPromptName: "translate",
|
||||
getPromptState: {
|
||||
status: "error",
|
||||
error:
|
||||
'Prompt "translate" requires argument "text" but none was provided. Please fill in all required arguments before submitting.',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ListChanged: Story = {
|
||||
args: {
|
||||
prompts: samplePrompts,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
import { useState } from "react";
|
||||
import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
|
||||
import {
|
||||
Alert,
|
||||
Card,
|
||||
Flex,
|
||||
Group,
|
||||
Loader,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import type {
|
||||
GetPromptResult,
|
||||
Prompt,
|
||||
|
|
@ -107,6 +116,21 @@ export function PromptsScreen({
|
|||
}
|
||||
/>
|
||||
</DetailCard>
|
||||
{getPromptState?.status === "pending" && (
|
||||
<DetailCard>
|
||||
<Stack align="center" py="xl">
|
||||
<Loader size="sm" />
|
||||
<Text c="dimmed">Loading prompt...</Text>
|
||||
</Stack>
|
||||
</DetailCard>
|
||||
)}
|
||||
{getPromptState?.status === "error" && (
|
||||
<DetailCard>
|
||||
<Alert color="red" variant="light" title="Prompt Error">
|
||||
{getPromptState.error ?? "Failed to get prompt"}
|
||||
</Alert>
|
||||
</DetailCard>
|
||||
)}
|
||||
{getPromptState?.result && (
|
||||
<DetailCard>
|
||||
<PromptMessagesDisplay
|
||||
|
|
|
|||
Loading…
Reference in a new issue