Tweaked event drawer skeleton

Author: niemyjski

src/Exceptionless.Web/ClientApp/package-lock.json

@@ -26,7 +26,7 @@
         "@iconify-json/lucide": "^1.2.20",
         "@playwright/test": "^1.49.1",
         "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/kit": "^2.15.0",
+        "@sveltejs/kit": "^2.15.1",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@types/eslint": "^9.6.1",
         "@types/node": "^22.10.2",

src/Exceptionless.Web/ClientApp/package.json

@@ -118,19 +118,20 @@
 <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
-            >
+            {#if eventResponse.isSuccess}
+                <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
+                >
+            {:else}
+                <Table.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Head>
+                <Table.Cell class="w-4 pr-0"></Table.Cell>
+                <Table.Cell class="flex items-center"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Cell>{/if}
         </Table.Row>
         <Table.Row class="group">
-            <Table.Head class="w-40 whitespace-nowrap">Project</Table.Head>
             {#if projectResponse.isSuccess}
+                <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}
@@ -140,9 +141,10 @@
                     /></Table.Cell
                 >
                 <Table.Cell>{projectResponse.data.name}</Table.Cell>
-            {:else if projectResponse.isLoading}
+            {:else}
+                <Table.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[24px] 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.Cell class="flex items-center"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Cell>
             {/if}
         </Table.Row>
     </Table.Body>
@@ -177,14 +179,14 @@
         {/each}
     </Tabs.Root>
 {:else}
-    <Skeleton class="h-[30px] w-full rounded-full" />
+    <Skeleton class="mt-4 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.Head class="w-40 whitespace-nowrap"><Skeleton class="h-[24px] 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.Cell class="flex items-center"><Skeleton class="h-[24px] w-full rounded-full" /></Table.Cell>
                 </Table.Row>
             {/each}
         </Table.Body>

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

@@ -186,9 +186,9 @@
             <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 size-6" />
                         <Skeleton class="mb-1 h-[28px] w-[60px]" />
-                        <Skeleton class="h-[16px] w-[80px]" />
+                        <Skeleton class="h-[24px] w-[80px]" />
                     </div>
                 {/each}
             </div>