Skip to content

Commit f87cb39

Browse files
niemyjskiniemyjski
committed
Added skeleton to event drawer.
1 parent 11ed27d commit f87cb39

File tree

2 files changed

+76
-30
lines changed

2 files changed

+76
-30
lines changed

‎src/Exceptionless.Web/ClientApp/src/lib/features/events/components/EventsDrawer.svelte

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import DateTime from '$comp/formatters/DateTime.svelte';
88
import TimeAgo from '$comp/formatters/TimeAgo.svelte';
99
import { P } from '$comp/typography';
10+
import { Skeleton } from '$comp/ui/skeleton';
1011
import * as Table from '$comp/ui/table';
1112
import * as Tabs from '$comp/ui/tabs';
1213
import { getEventQuery } from '$features/events/api.svelte';
@@ -112,37 +113,42 @@
112113
});
113114
</script>
114115

115-
{#if eventResponse.isLoading}
116-
<P>Loading...</P>
117-
{:else if eventResponse.isSuccess}
118-
<StackCard {changed} id={eventResponse.data.stack_id}></StackCard>
116+
<StackCard {changed} id={eventResponse.data?.stack_id}></StackCard>
119117

120-
<Table.Root class="mt-4">
121-
<Table.Body>
122-
<Table.Row class="group">
123-
<Table.Head class="w-40 whitespace-nowrap">Occurred On</Table.Head>
124-
<Table.Cell class="w-4 pr-0"></Table.Cell>
125-
<Table.Cell class="flex items-center"
126-
><DateTime value={eventResponse.data.date}></DateTime> (<TimeAgo value={eventResponse.data.date}></TimeAgo>)</Table.Cell
118+
<Table.Root class="mt-4">
119+
<Table.Body>
120+
<Table.Row class="group">
121+
<Table.Head class="w-40 whitespace-nowrap">Occurred On</Table.Head>
122+
<Table.Cell class="w-4 pr-0"></Table.Cell>
123+
<Table.Cell class="flex items-center"
124+
>{#if eventResponse.isSuccess}
125+
<DateTime value={eventResponse.data.date}></DateTime> (<TimeAgo value={eventResponse.data.date}></TimeAgo>)
126+
{:else}
127+
<Skeleton class="h-[20px] w-full rounded-full" />
128+
{/if}</Table.Cell
129+
>
130+
</Table.Row>
131+
<Table.Row class="group">
132+
<Table.Head class="w-40 whitespace-nowrap">Project</Table.Head>
133+
{#if projectResponse.isSuccess}
134+
<Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
135+
><ClickableProjectFilter
136+
{changed}
137+
class="mr-0"
138+
organization={projectResponse.data.organization_id!}
139+
value={[projectResponse.data.id!]}
140+
/></Table.Cell
127141
>
128-
</Table.Row>
129-
{#if projectResponse.data}
130-
<Table.Row class="group">
131-
<Table.Head class="w-40 whitespace-nowrap">Project</Table.Head>
132-
<Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
133-
><ClickableProjectFilter
134-
{changed}
135-
class="mr-0"
136-
organization={projectResponse.data.organization_id!}
137-
value={[projectResponse.data.id!]}
138-
/></Table.Cell
139-
>
140-
<Table.Cell>{projectResponse.data.name}</Table.Cell>
141-
</Table.Row>
142+
<Table.Cell>{projectResponse.data.name}</Table.Cell>
143+
{:else if projectResponse.isLoading}
144+
<Table.Cell class="w-4 pr-0"></Table.Cell>
145+
<Table.Cell class="flex items-center"><Skeleton class="h-[20px] w-full rounded-full" /></Table.Cell>
142146
{/if}
143-
</Table.Body>
144-
</Table.Root>
147+
</Table.Row>
148+
</Table.Body>
149+
</Table.Root>
145150

151+
{#if eventResponse.isSuccess}
146152
<Tabs.Root class="mb-4 mt-4" value={activeTab}>
147153
<Tabs.List class="mb-4 w-full justify-normal">
148154
{#each tabs as tab (tab)}
@@ -171,5 +177,16 @@
171177
{/each}
172178
</Tabs.Root>
173179
{:else}
174-
<ErrorMessage message={eventResponse.error?.errors.general}></ErrorMessage>
180+
<Skeleton class="h-[30px] w-full rounded-full" />
181+
<Table.Root class="mt-4">
182+
<Table.Body>
183+
{#each Array.from({ length: 5 })}
184+
<Table.Row class="group">
185+
<Table.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[20px] w-full rounded-full" /></Table.Head>
186+
<Table.Cell class="w-4 pr-0"></Table.Cell>
187+
<Table.Cell class="flex items-center"><Skeleton class="h-[20px] w-full rounded-full" /></Table.Cell>
188+
</Table.Row>
189+
{/each}
190+
</Table.Body>
191+
</Table.Root>
175192
{/if}

‎src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/StackCard.svelte

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import Muted from '$comp/typography/Muted.svelte';
1010
import { Badge } from '$comp/ui/badge';
1111
import * as Card from '$comp/ui/card';
12+
import { Skeleton } from '$comp/ui/skeleton';
1213
import * as Tooltip from '$comp/ui/tooltip';
1314
import { getProjectCountQuery, getStackCountQuery } from '$features/events/api.svelte';
1415
import { DEFAULT_OFFSET } from '$features/shared/api/api.svelte';
@@ -27,7 +28,7 @@
2728
2829
interface Props {
2930
changed: (filter: IFilter) => void;
30-
id: string;
31+
id: string | undefined;
3132
}
3233
3334
let { changed, id }: Props = $props();
@@ -72,7 +73,7 @@
7273
const lastOccurrence = $derived(max<string>(stackCountResponse?.data?.aggregations, 'max_date')?.value ?? stack?.last_occurrence);
7374
</script>
7475

75-
{#if stack}
76+
{#if stackResponse.isSuccess}
7677
<Card.Root>
7778
<Card.Header>
7879
<Card.Title class="flex flex-row items-center justify-between text-lg font-semibold">
@@ -165,4 +166,32 @@
165166
<StackReferences {stack} />
166167
</Card.Content>
167168
</Card.Root>
169+
{:else}
170+
<Card.Root>
171+
<Card.Header>
172+
<Card.Title class="flex flex-row items-center justify-between text-lg font-semibold">
173+
<span class="mb-2 flex flex-col lg:mb-0">
174+
<div class="flex items-center gap-2">
175+
<Skeleton class="h-[26px] w-[32px]" />
176+
<Skeleton class="h-[26px] w-[200px]" />
177+
</div>
178+
</span>
179+
<div class="flex items-center space-x-2">
180+
<Skeleton class="h-[36px] w-[135px]" />
181+
<Skeleton class="h-[36px] w-[32px]" />
182+
</div>
183+
</Card.Title>
184+
</Card.Header>
185+
<Card.Content class="space-y-4 pt-2">
186+
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
187+
{#each Array(4)}
188+
<div class="flex flex-col items-center rounded-lg bg-muted p-2">
189+
<Skeleton class="mb-1 h-6 w-6" />
190+
<Skeleton class="mb-1 h-[28px] w-[60px]" />
191+
<Skeleton class="h-[16px] w-[80px]" />
192+
</div>
193+
{/each}
194+
</div>
195+
</Card.Content>
196+
</Card.Root>
168197
{/if}

0 commit comments

Comments
 (0)