Unified loading states.

src/components/metrics/EventData.tsx

@@ -0,0 +1,22 @@
+import { Grid, Column, Text, Label } from '@umami/react-zen';
+import { useEventDataQuery } from '@/components/hooks';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+
+export function EventData({ websiteId, eventId }: { websiteId: string; eventId: string }) {
+  const { data, isLoading, error } = useEventDataQuery(websiteId, eventId);
+
+  return (
+    <LoadingPanel isLoading={isLoading} error={error}>
+      <Grid columns="1fr 1fr" gap="5">
+        {data?.map(({ dataKey, stringValue }) => {
+          return (
+            <Column key={dataKey}>
+              <Label>{dataKey}</Label>
+              <Text>{stringValue}</Text>
+            </Column>
+          );
+        })}
+      </Grid>
+    </LoadingPanel>
+  );
+}