From 1065004fa374b5facd20537b690ed014a8a2850c Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Fri, 16 Jan 2026 02:07:08 +0100
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=9A=B8=20show=20a=20better=20loading?=
 =?UTF-8?q?=20state=20for=20analytics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 messages/en-US.json                 |  1 +
 src/components/LogAnalyticsData.tsx | 51 ++++++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 82b419bb..be515a8f 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1281,6 +1281,7 @@
     "setupErrorCreateAdmin": "An error occurred while creating the server admin account.",
     "certificateStatus": "Certificate Status",
     "loading": "Loading",
+    "loadingAnalytics": "Loading Analytics",
     "restart": "Restart",
     "domains": "Domains",
     "domainsDescription": "Create and manage domains available in the organization",
diff --git a/src/components/LogAnalyticsData.tsx b/src/components/LogAnalyticsData.tsx
index 90379fdf..174865e4 100644
--- a/src/components/LogAnalyticsData.tsx
+++ b/src/components/LogAnalyticsData.tsx
@@ -48,6 +48,7 @@ import {
     TooltipTrigger
 } from "./ui/tooltip";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import type { QueryRequestAnalyticsResponse } from "@server/routers/auditLogs";
 
 export type AnalyticsContentProps = {
     orgId: string;
@@ -276,13 +277,32 @@ export function LogAnalyticsData(props: AnalyticsContentProps) {
                 </CardHeader>
             </Card>
 
-            <Card className="w-full h-full flex flex-col gap-8">
+            <Card className="w-full h-full flex flex-col gap-8 relative">
+                {isLoadingAnalytics && (
+                    <div className="absolute z-20 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 border border-border rounded-md bg-muted">
+                        <div className="flex items-center gap-2 p-6">
+                            <LoaderIcon className="size-4 animate-spin" />
+                            {t("loadingAnalytics")}
+                        </div>
+                    </div>
+                )}
+
                 <CardHeader>
                     <h3 className="font-semibold">{t("requestsByDay")}</h3>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="relative">
+                    {isLoadingAnalytics && (
+                        <div className="backdrop-blur-[2px] z-10 absolute inset-0"></div>
+                    )}
                     <RequestChart
-                        data={stats?.requestsPerDay ?? []}
+                        className={cn(
+                            isLoadingAnalytics &&
+                                "opacity-50 pointer-events-none"
+                        )}
+                        data={
+                            stats?.requestsPerDay ??
+                            generateSampleDailyRequests()
+                        }
                         isLoading={isLoadingAnalytics}
                     />
                 </CardContent>
@@ -323,6 +343,28 @@ export function LogAnalyticsData(props: AnalyticsContentProps) {
     );
 }
 
+function generateSampleDailyRequests(): QueryRequestAnalyticsResponse["requestsPerDay"] {
+    const today = new Date();
+
+    // generate sample data for the last 7 days
+    const requestsPerDay = Array.from({ length: 7 }, (_, i) => {
+        const date = new Date(today);
+        date.setDate(date.getDate() - (6 - i));
+        // generate a random number of requests between 1 and 100
+        const totalCount = Math.floor(Math.random() * 100) + 1;
+        // generate a random number of requests between 1 and totalCount
+        const blockedCount = Math.floor(Math.random() * (totalCount + 1));
+        return {
+            day: date.toISOString().split("T")[0],
+            allowedCount: totalCount - blockedCount,
+            blockedCount,
+            totalCount
+        };
+    });
+
+    return requestsPerDay;
+}
+
 type RequestChartProps = {
     data: {
         day: string;
@@ -331,6 +373,7 @@ type RequestChartProps = {
         totalCount: number;
     }[];
     isLoading: boolean;
+    className?: string;
 };
 
 function RequestChart(props: RequestChartProps) {
@@ -359,7 +402,7 @@ function RequestChart(props: RequestChartProps) {
     return (
         <ChartContainer
             config={chartConfig}
-            className="min-h-[200px] w-full h-80"
+            className={cn("min-h-50 w-full h-80", props.className)}
         >
             <LineChart accessibilityLayer data={props.data}>
                 <ChartLegend content={<ChartLegendContent />} />

From c93766bb48b157ecf900e88f6f3fbc1e01e43f13 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Fri, 16 Jan 2026 17:35:17 +0100
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=84fix=20countries=20list=20grid?=
 =?UTF-8?q?=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LogAnalyticsData.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/LogAnalyticsData.tsx b/src/components/LogAnalyticsData.tsx
index 174865e4..0c3e1ec8 100644
--- a/src/components/LogAnalyticsData.tsx
+++ b/src/components/LogAnalyticsData.tsx
@@ -510,7 +510,7 @@ function TopCountriesList(props: TopCountriesListProps) {
                 </div>
             )}
             {/* `aspect-475/335` is the same aspect ratio as the world map component */}
-            <ol className="w-full overflow-auto grid gap-1 aspect-475/335">
+            <ol className="w-full overflow-auto gap-1 aspect-475/335 flex flex-col">
                 {props.countries.length === 0 && (
                     <div className="flex items-center justify-center size-full text-muted-foreground gap-1">
                         {props.isLoading ? (
@@ -523,12 +523,12 @@ function TopCountriesList(props: TopCountriesListProps) {
                         )}
                     </div>
                 )}
-                {props.countries.map((country) => {
+                {props.countries.slice(0, 3).map((country) => {
                     const percent = country.count / props.total;
                     return (
                         <li
                             key={country.code}
-                            className="grid grid-cols-7 rounded-xs hover:bg-muted relative items-center text-sm"
+                            className="w-full grid grid-cols-7 rounded-xs hover:bg-muted relative items-center text-sm"
                         >
                             <div
                                 className={cn(

From f4496bb23a2e9874be6ec639c4fd0fd5fcce88b8 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Fri, 16 Jan 2026 17:36:48 +0100
Subject: [PATCH 3/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20show=20all=20country?=
 =?UTF-8?q?=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LogAnalyticsData.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LogAnalyticsData.tsx b/src/components/LogAnalyticsData.tsx
index 0c3e1ec8..2c541239 100644
--- a/src/components/LogAnalyticsData.tsx
+++ b/src/components/LogAnalyticsData.tsx
@@ -523,7 +523,7 @@ function TopCountriesList(props: TopCountriesListProps) {
                         )}
                     </div>
                 )}
-                {props.countries.slice(0, 3).map((country) => {
+                {props.countries.map((country) => {
                     const percent = country.count / props.total;
                     return (
                         <li