Skip to content

Commit

Permalink
Added skeleton to event drawer.
Browse files Browse the repository at this point in the history
  • Loading branch information
@niemyjski
niemyjski committed Dec 28, 2024
1 parent 11ed27d commit f87cb39
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 30 deletions.
73 changes: 45 additions & 28 deletions src/Exceptionless.Web/ClientApp/src/lib/features/events/components/EventsDrawer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import DateTime from '$comp/formatters/DateTime.svelte';
import TimeAgo from '$comp/formatters/TimeAgo.svelte';
import { P } from '$comp/typography';
import { Skeleton } from '$comp/ui/skeleton';
import * as Table from '$comp/ui/table';
import * as Tabs from '$comp/ui/tabs';
import { getEventQuery } from '$features/events/api.svelte';
Expand Down Expand Up @@ -112,37 +113,42 @@
});
</script>

{#if eventResponse.isLoading}
<P>Loading...</P>
{:else if eventResponse.isSuccess}
<StackCard {changed} id={eventResponse.data.stack_id}></StackCard>
<StackCard {changed} id={eventResponse.data?.stack_id}></StackCard>

<Table.Root class="mt-4">
<Table.Body>
<Table.Row class="group">
<Table.Head class="w-40 whitespace-nowrap">Occurred On</Table.Head>
<Table.Cell class="w-4 pr-0"></Table.Cell>
<Table.Cell class="flex items-center"
><DateTime value={eventResponse.data.date}></DateTime> (<TimeAgo value={eventResponse.data.date}></TimeAgo>)</Table.Cell
<Table.Root class="mt-4">
<Table.Body>
<Table.Row class="group">
<Table.Head class="w-40 whitespace-nowrap">Occurred On</Table.Head>
<Table.Cell class="w-4 pr-0"></Table.Cell>
<Table.Cell class="flex items-center"
>{#if eventResponse.isSuccess}
<DateTime value={eventResponse.data.date}></DateTime> (<TimeAgo value={eventResponse.data.date}></TimeAgo>)
{:else}
<Skeleton class="h-[20px] w-full rounded-full" />
{/if}</Table.Cell
>
</Table.Row>
<Table.Row class="group">
<Table.Head class="w-40 whitespace-nowrap">Project</Table.Head>
{#if projectResponse.isSuccess}
<Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
><ClickableProjectFilter
{changed}
class="mr-0"
organization={projectResponse.data.organization_id!}
value={[projectResponse.data.id!]}
/></Table.Cell
>
</Table.Row>
{#if projectResponse.data}
<Table.Row class="group">
<Table.Head class="w-40 whitespace-nowrap">Project</Table.Head>
<Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
><ClickableProjectFilter
{changed}
class="mr-0"
organization={projectResponse.data.organization_id!}
value={[projectResponse.data.id!]}
/></Table.Cell
>
<Table.Cell>{projectResponse.data.name}</Table.Cell>
</Table.Row>
<Table.Cell>{projectResponse.data.name}</Table.Cell>
{:else if projectResponse.isLoading}
<Table.Cell class="w-4 pr-0"></Table.Cell>
<Table.Cell class="flex items-center"><Skeleton class="h-[20px] w-full rounded-full" /></Table.Cell>
{/if}
</Table.Body>
</Table.Root>
</Table.Row>
</Table.Body>
</Table.Root>

{#if eventResponse.isSuccess}
<Tabs.Root class="mb-4 mt-4" value={activeTab}>
<Tabs.List class="mb-4 w-full justify-normal">
{#each tabs as tab (tab)}
Expand Down Expand Up @@ -171,5 +177,16 @@
{/each}
</Tabs.Root>
{:else}
<ErrorMessage message={eventResponse.error?.errors.general}></ErrorMessage>
<Skeleton class="h-[30px] w-full rounded-full" />
<Table.Root class="mt-4">
<Table.Body>
{#each Array.from({ length: 5 })}
<Table.Row class="group">
<Table.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[20px] w-full rounded-full" /></Table.Head>
<Table.Cell class="w-4 pr-0"></Table.Cell>
<Table.Cell class="flex items-center"><Skeleton class="h-[20px] w-full rounded-full" /></Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
{/if}
33 changes: 31 additions & 2 deletions src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/StackCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import Muted from '$comp/typography/Muted.svelte';
import { Badge } from '$comp/ui/badge';
import * as Card from '$comp/ui/card';
import { Skeleton } from '$comp/ui/skeleton';
import * as Tooltip from '$comp/ui/tooltip';
import { getProjectCountQuery, getStackCountQuery } from '$features/events/api.svelte';
import { DEFAULT_OFFSET } from '$features/shared/api/api.svelte';
Expand All @@ -27,7 +28,7 @@
interface Props {
changed: (filter: IFilter) => void;
id: string;
id: string | undefined;
}
let { changed, id }: Props = $props();
Expand Down Expand Up @@ -72,7 +73,7 @@
const lastOccurrence = $derived(max<string>(stackCountResponse?.data?.aggregations, 'max_date')?.value ?? stack?.last_occurrence);
</script>

{#if stack}
{#if stackResponse.isSuccess}
<Card.Root>
<Card.Header>
<Card.Title class="flex flex-row items-center justify-between text-lg font-semibold">
Expand Down Expand Up @@ -165,4 +166,32 @@
<StackReferences {stack} />
</Card.Content>
</Card.Root>
{:else}
<Card.Root>
<Card.Header>
<Card.Title class="flex flex-row items-center justify-between text-lg font-semibold">
<span class="mb-2 flex flex-col lg:mb-0">
<div class="flex items-center gap-2">
<Skeleton class="h-[26px] w-[32px]" />
<Skeleton class="h-[26px] w-[200px]" />
</div>
</span>
<div class="flex items-center space-x-2">
<Skeleton class="h-[36px] w-[135px]" />
<Skeleton class="h-[36px] w-[32px]" />
</div>
</Card.Title>
</Card.Header>
<Card.Content class="space-y-4 pt-2">
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
{#each Array(4)}
<div class="flex flex-col items-center rounded-lg bg-muted p-2">
<Skeleton class="mb-1 h-6 w-6" />
<Skeleton class="mb-1 h-[28px] w-[60px]" />
<Skeleton class="h-[16px] w-[80px]" />
</div>
{/each}
</div>
</Card.Content>
</Card.Root>
{/if}

0 comments on commit f87cb39

Please sign in to comment.