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 = {
|
export const ListChanged: Story = {
|
||||||
args: {
|
args: {
|
||||||
prompts: samplePrompts,
|
prompts: samplePrompts,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,14 @@
|
||||||
import { useState } from "react";
|
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 {
|
import type {
|
||||||
GetPromptResult,
|
GetPromptResult,
|
||||||
Prompt,
|
Prompt,
|
||||||
|
|
@ -107,6 +116,21 @@ export function PromptsScreen({
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</DetailCard>
|
</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 && (
|
{getPromptState?.result && (
|
||||||
<DetailCard>
|
<DetailCard>
|
||||||
<PromptMessagesDisplay
|
<PromptMessagesDisplay
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue