From e2a04c2e6dd3265503f64245fb700a27ad8a72ed Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 15 Jan 2026 17:33:13 +0100
Subject: [PATCH 1/7] Add loading skeleton upon page reload

---
 .../live/components/dashboard/report_list.ex  | 128 +++++++++++++-----
 .../live/components/dashboard/tile.ex         |  25 +---
 lib/plausible_web/live/dashboard.ex           |  21 +--
 lib/plausible_web/live/dashboard/pages.ex     |   2 +
 lib/plausible_web/live/dashboard/sources.ex   |   2 +
 5 files changed, 117 insertions(+), 61 deletions(-)

diff --git a/lib/plausible_web/live/components/dashboard/report_list.ex b/lib/plausible_web/live/components/dashboard/report_list.ex
index 81a1f3948e1a..c8479a9f8948 100644
--- a/lib/plausible_web/live/components/dashboard/report_list.ex
+++ b/lib/plausible_web/live/components/dashboard/report_list.ex
@@ -19,6 +19,8 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
 
   def height, do: @min_height
 
+  attr :connected?, :boolean, required: true
+
   def report(assigns) do
     assigns =
       assign(assigns,
@@ -30,44 +32,100 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
         col_min_width: @col_min_width
       )
 
-    %QueryResult{results: results, meta: meta, query: query} = assigns.query_result
+    if !assigns.connected? do
+      ~H"""
+      <.skeleton
+        min_height={@min_height}
+        row_height={@row_height}
+        row_gap_height={@row_gap_height}
+        data_container_height={@data_container_height}
+        col_min_width={@col_min_width}
+        max_items={@max_items}
+        data_test_id={@data_test_id}
+      />
+      """
+    else
+      %QueryResult{results: results, meta: meta, query: query} = assigns.query_result
 
-    assigns =
-      assign(assigns,
-        results: results,
-        metric_keys: query[:metrics],
-        metric_labels: meta[:metric_labels],
-        empty?: Enum.empty?(results)
-      )
+      assigns =
+        assign(assigns,
+          results: results,
+          metric_keys: query[:metrics],
+          metric_labels: meta[:metric_labels],
+          empty?: Enum.empty?(results)
+        )
 
-    ~H"""
-    <.no_data :if={@empty?} min_height={@min_height} data_test_id={@data_test_id} />
-
-    <div :if={not @empty?} class="h-full flex flex-col" data-test-id={@data_test_id}>
-      <div style={"min-height: #{@row_height}px;"}>
-        <.report_header
-          key_label={@key_label}
-          metric_labels={@metric_labels}
-          col_min_width={@col_min_width}
-        />
+      ~H"""
+      <.no_data :if={@empty?} min_height={@min_height} data_test_id={@data_test_id} />
+
+      <div :if={not @empty?} class="h-full flex flex-col" data-test-id={@data_test_id}>
+        <div style={"min-height: #{@row_height}px;"}>
+          <.report_header
+            key_label={@key_label}
+            metric_labels={@metric_labels}
+            col_min_width={@col_min_width}
+          />
+        </div>
+
+        <div class="grow" style={"min-height: #{@data_container_height}px;"}>
+          <.report_row
+            :for={{item, item_index} <- Enum.with_index(@results)}
+            link_fn={assigns[:external_link_fn]}
+            item={item}
+            item_index={item_index}
+            item_name={List.first(item.dimensions)}
+            metrics={Enum.zip(@metric_keys, item.metrics)}
+            bar_max_value={bar_max_value(@results, @metric_keys)}
+            site={@site}
+            params={@params}
+            dimension={@dimension}
+            row_height={@row_height}
+            row_gap_height={@row_gap_height}
+            col_min_width={@col_min_width}
+          />
+        </div>
       </div>
+      """
+    end
+  end
 
-      <div class="grow" style={"min-height: #{@data_container_height}px;"}>
-        <.report_row
-          :for={{item, item_index} <- Enum.with_index(@results)}
-          link_fn={assigns[:external_link_fn]}
-          item={item}
-          item_index={item_index}
-          item_name={List.first(item.dimensions)}
-          metrics={Enum.zip(@metric_keys, item.metrics)}
-          bar_max_value={bar_max_value(@results, @metric_keys)}
-          site={@site}
-          params={@params}
-          dimension={@dimension}
-          row_height={@row_height}
-          row_gap_height={@row_gap_height}
-          col_min_width={@col_min_width}
-        />
+  defp skeleton(assigns) do
+    bar_widths = [100, 45, 25, 14, 10, 7, 5, 4, 3]
+    number_widths = [9, 8, 7, 8, 9, 7, 9, 7, 8]
+    value_widths = [22, 16, 20, 14, 19, 15, 21, 13, 17]
+
+    ~H"""
+    <div
+      data-test-id={@data_test_id}
+      class="h-full flex flex-col"
+      style={"min-height: #{@min_height}px;"}
+    >
+      <div
+        class="flex justify-between w-full pt-4"
+        style={"height: #{@row_height}px;"}
+      >
+        <div class="w-12 h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse">
+        </div>
+      </div>
+      <div
+        :for={{bar_width, number_width, value_width} <- Enum.zip([bar_widths, number_widths, value_widths])}
+        class="flex items-center justify-between w-full"
+        style={"margin-top: #{@row_gap_height}px;"}
+      >
+        <div
+          class="bg-gray-100/70 dark:bg-gray-800/70 rounded-sm animate-pulse relative"
+          style={"height: #{@row_height}px; width: #{bar_width}%;"}
+        >
+          <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse absolute top-1/2 -translate-y-1/2 left-2" style={"width: #{value_width * 4}px;"}>
+          </div>
+        </div>
+        <div
+          class="flex items-center justify-end"
+          style={"height: #{@row_height}px; width: 70px;"}
+        >
+          <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" style={"width: #{number_width * 4}px;"}>
+          </div>
+        </div>
       </div>
     </div>
     """
@@ -149,7 +207,7 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
           >
             <div class="flex justify-start items-center gap-x-1.5 px-2 py-1.5 text-sm dark:text-gray-300 relative z-9 break-all w-full">
               <Base.dashboard_link
-                class="max-w-max w-full flex items-center md:overflow-hidden hover:underline"
+                class="block min-w-0 truncate hover:underline"
                 to={Utils.dashboard_route(@site, @params, filter: [:is, @dimension, [@item_name]])}
               >
                 {trim_name(@item_name, @col_min_width)}
diff --git a/lib/plausible_web/live/components/dashboard/tile.ex b/lib/plausible_web/live/components/dashboard/tile.ex
index 7268df71621e..7ab17e70d399 100644
--- a/lib/plausible_web/live/components/dashboard/tile.ex
+++ b/lib/plausible_web/live/components/dashboard/tile.ex
@@ -23,7 +23,7 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
     <div
       data-tile
       id={@id}
-      class="relative min-h-[430px] w-full p-5 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem"
+      class="relative min-h-[430px] w-full p-5 flex flex-col bg-white border border-gray-150 dark:bg-gray-900 dark:border-gray-800 rounded-lg md:min-h-initial md:h-27.25rem"
     >
       <%!-- reportheader --%>
       <div class="w-full flex justify-between border-b border-gray-200 dark:border-gray-750">
@@ -41,24 +41,10 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
             {render_slot(@warnings)}
           </div>
         </div>
-        <.details_link details_route={@details_route} path="/pages" />
+        <.details_link :if={@connected?} details_route={@details_route} path="/pages" />
       </div>
       <%!-- reportbody --%>
-      <div
-        class={"w-full flex-col justify-center #{if @connected?, do: "group-[.phx-navigation-loading]:flex group-has-[.tile-tabs.phx-hook-loading]:flex hidden", else: "flex"}"}
-        style={"min-height: #{@height}px;"}
-      >
-        <div class="mx-auto loading">
-          <div></div>
-        </div>
-      </div>
-
-      <div
-        :if={@connected?}
-        class="group-[.phx-navigation-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden"
-      >
-        {render_slot(@inner_block)}
-      </div>
+      {render_slot(@inner_block)}
     </div>
     """
   end
@@ -68,6 +54,7 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
   attr :active_tab, :string, required: true
   attr :storage_key, :string, required: true
   attr :target, :any, required: true
+  attr :connected?, :boolean, default: true
 
   def tab(assigns) do
     assigns =
@@ -83,9 +70,10 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
     ~H"""
     <div
       {@data_attrs}
-      class="-mb-px pb-4 data-[active=true]:border-b-2 data-[active=true]:border-gray-900 data-[active=true]:dark:border-gray-100"
+      class={"-mb-px pb-4 #{if @connected?, do: "data-[active=true]:border-b-2 data-[active=true]:border-gray-900 data-[active=true]:dark:border-gray-100"}"}
     >
       <button
+        :if={@connected?}
         class="group/tab flex rounded-sm"
         data-tab-key={@tab_key}
         data-report-label={@report_label}
@@ -107,6 +95,7 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
           {@report_label}
         </span>
       </button>
+      <div :if={!@connected?} class="h-3.5 mb-1 w-18 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
     </div>
     """
   end
diff --git a/lib/plausible_web/live/dashboard.ex b/lib/plausible_web/live/dashboard.ex
index e8bcc5bf4249..957e33f4d7b2 100644
--- a/lib/plausible_web/live/dashboard.ex
+++ b/lib/plausible_web/live/dashboard.ex
@@ -72,14 +72,19 @@ defmodule PlausibleWeb.Live.Dashboard do
       class="container print:max-w-full pt-6 mb-16 grid grid-cols-1 md:grid-cols-2 gap-5"
     >
       <div class="col-span-full flex items-center justify-end">
-        <.live_component
-          module={PlausibleWeb.Live.Dashboard.DatePicker}
-          id="datepicker-component"
-          site={@site}
-          user_prefs={@user_prefs}
-          connected?={@connected?}
-          params={@params}
-        />
+        <div :if={@connected?} class="flex shrink-0">
+          <.live_component
+            module={PlausibleWeb.Live.Dashboard.DatePicker}
+            id="datepicker-component"
+            site={@site}
+            user_prefs={@user_prefs}
+            connected?={@connected?}
+            params={@params}
+          />
+        </div>
+        <div :if={!@connected?} class="h-9 w-36 md:w-48 flex items-center shrink-0">
+          <div class="h-3.5 w-full bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
+        </div>
       </div>
       <.live_component
         module={PlausibleWeb.Live.Dashboard.Sources}
diff --git a/lib/plausible_web/live/dashboard/pages.ex b/lib/plausible_web/live/dashboard/pages.ex
index fa8ebad7cc30..f81e8705d863 100644
--- a/lib/plausible_web/live/dashboard/pages.ex
+++ b/lib/plausible_web/live/dashboard/pages.ex
@@ -73,6 +73,7 @@ defmodule PlausibleWeb.Live.Dashboard.Pages do
             active_tab={@active_tab}
             storage_key="pageTab"
             target={@myself}
+            connected?={@connected?}
           />
         </:tabs>
 
@@ -83,6 +84,7 @@ defmodule PlausibleWeb.Live.Dashboard.Pages do
           dimension={get_tab_info(@active_tab, :dimension)}
           params={@params}
           query_result={@query_result}
+          connected?={@connected?}
           external_link_fn={page_external_link_fn_for(@site)}
         />
       </Tile.tile>
diff --git a/lib/plausible_web/live/dashboard/sources.ex b/lib/plausible_web/live/dashboard/sources.ex
index bd76e333e213..50e2e9d92d6b 100644
--- a/lib/plausible_web/live/dashboard/sources.ex
+++ b/lib/plausible_web/live/dashboard/sources.ex
@@ -77,6 +77,7 @@ defmodule PlausibleWeb.Live.Dashboard.Sources do
             active_tab={@active_tab}
             storage_key="sourceTab"
             target={@myself}
+            connected?={@connected?}
           />
         </:tabs>
 
@@ -87,6 +88,7 @@ defmodule PlausibleWeb.Live.Dashboard.Sources do
           dimension={get_tab_info(@active_tab, :dimension)}
           params={@params}
           query_result={@query_result}
+          connected?={@connected?}
           external_link_fn={nil}
         />
       </Tile.tile>

From 344dd43b66aa068cfc3108bd422a9675ae2276eb Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 15 Jan 2026 17:34:08 +0100
Subject: [PATCH 2/7] Add loading states for transition between tabs and
 timeframes

---
 assets/css/app.css                                 | 14 ++++++++++++++
 assets/js/liveview/live_socket.js                  | 12 ++++++++++++
 .../live/components/dashboard/base.ex              |  2 +-
 .../live/components/dashboard/report_list.ex       |  8 ++++----
 .../live/components/dashboard/tile.ex              |  2 +-
 lib/plausible_web/live/dashboard.ex                |  2 +-
 lib/plausible_web/live/dashboard/datepicker.ex     |  4 ++--
 lib/plausible_web/live/dashboard/pages.ex          |  2 +-
 lib/plausible_web/live/dashboard/sources.ex        |  2 +-
 9 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index d55345e46a1b..b6e8c874684d 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -105,6 +105,20 @@
   --default-ring-color: var(--color-indigo-500);
 }
 
+@layer utilities {
+  .animate-pulse {
+    animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
+  }
+  
+  [class*="group/report"]:has(.tile-tabs.phx-hook-loading) [class*="group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse"] {
+    animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
+  }
+  
+  [class*="group/dashboard"].phx-navigation-loading [class*="group-[.phx-navigation-loading]/dashboard:animate-pulse"] {
+    animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
+  }
+}
+
 @media print {
   canvas {
     width: 100% !important;
diff --git a/assets/js/liveview/live_socket.js b/assets/js/liveview/live_socket.js
index f5fa9e46d68d..3b92b1b208ad 100644
--- a/assets/js/liveview/live_socket.js
+++ b/assets/js/liveview/live_socket.js
@@ -104,6 +104,18 @@ if (csrfToken && websocketUrl) {
   window.addEventListener('phx:page-loading-start', (_info) => topbar.show())
   window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide())
 
+  const dashboardContainer = document.getElementById('live-dashboard-container')
+  if (dashboardContainer) {
+    window.addEventListener('phx:page-loading-start', (info) => {
+      if (info.detail?.kind === 'patch') {
+        dashboardContainer.classList.add('phx-navigation-loading')
+      }
+    })
+    window.addEventListener('phx:page-loading-stop', () => {
+      dashboardContainer.classList.remove('phx-navigation-loading')
+    })
+  }
+
   liveSocket.connect()
   window.liveSocket = liveSocket
 }
diff --git a/lib/plausible_web/live/components/dashboard/base.ex b/lib/plausible_web/live/components/dashboard/base.ex
index 096654daf98c..5c809566826a 100644
--- a/lib/plausible_web/live/components/dashboard/base.ex
+++ b/lib/plausible_web/live/components/dashboard/base.ex
@@ -39,7 +39,7 @@ defmodule PlausibleWeb.Components.Dashboard.Base do
     ~H"""
     <div class="w-full h-full relative" style={@style}>
       <div
-        class={"absolute top-0 left-0 h-full rounded-sm transition-colors duration-150 #{@background_class || ""}"}
+        class={"absolute top-0 left-0 h-full rounded-sm transition-[width] duration-200 ease-in-out #{@background_class || ""}"}
         data-test-id="bar-indicator"
         style={"width: #{@width_percent}%"}
       >
diff --git a/lib/plausible_web/live/components/dashboard/report_list.ex b/lib/plausible_web/live/components/dashboard/report_list.ex
index c8479a9f8948..e99bd9a012c8 100644
--- a/lib/plausible_web/live/components/dashboard/report_list.ex
+++ b/lib/plausible_web/live/components/dashboard/report_list.ex
@@ -58,8 +58,8 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
       ~H"""
       <.no_data :if={@empty?} min_height={@min_height} data_test_id={@data_test_id} />
 
-      <div :if={not @empty?} class="h-full flex flex-col" data-test-id={@data_test_id}>
-        <div style={"min-height: #{@row_height}px;"}>
+      <div :if={not @empty?} class="h-full flex flex-col group-has-[.tile-tabs.phx-hook-loading]/report:opacity-60 group-[.phx-navigation-loading]/dashboard:opacity-60" data-test-id={@data_test_id}>
+        <div class="group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse group-[.phx-navigation-loading]/dashboard:animate-pulse" style={"min-height: #{@row_height}px;"}>
           <.report_header
             key_label={@key_label}
             metric_labels={@metric_labels}
@@ -67,7 +67,7 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
           />
         </div>
 
-        <div class="grow" style={"min-height: #{@data_container_height}px;"}>
+        <div class="grow group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse group-[.phx-navigation-loading]/dashboard:animate-pulse" style={"min-height: #{@data_container_height}px;"}>
           <.report_row
             :for={{item, item_index} <- Enum.with_index(@results)}
             link_fn={assigns[:external_link_fn]}
@@ -135,7 +135,7 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
     ~H"""
     <div
       data-test-id={@data_test_id}
-      class="w-full h-full flex flex-col justify-center group-has-[.tile-tabs.phx-hook-loading]:hidden"
+      class="w-full h-full flex flex-col justify-center group-has-[.tile-tabs.phx-hook-loading]/report:hidden"
       style={"min-height: #{@min_height}px;"}
     >
       <div class="mx-auto font-medium text-gray-500 dark:text-gray-400">
diff --git a/lib/plausible_web/live/components/dashboard/tile.ex b/lib/plausible_web/live/components/dashboard/tile.ex
index 7ab17e70d399..111642e0d090 100644
--- a/lib/plausible_web/live/components/dashboard/tile.ex
+++ b/lib/plausible_web/live/components/dashboard/tile.ex
@@ -37,7 +37,7 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
           >
             {render_slot(@tabs)}
           </div>
-          <div class="group-[.phx-navigation-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden">
+          <div class="group-[.phx-navigation-loading]/dashboard:hidden group-has-[.tile-tabs.phx-hook-loading]/report:hidden">
             {render_slot(@warnings)}
           </div>
         </div>
diff --git a/lib/plausible_web/live/dashboard.ex b/lib/plausible_web/live/dashboard.ex
index 957e33f4d7b2..24bb2d67bb22 100644
--- a/lib/plausible_web/live/dashboard.ex
+++ b/lib/plausible_web/live/dashboard.ex
@@ -69,7 +69,7 @@ defmodule PlausibleWeb.Live.Dashboard do
     <div
       id="live-dashboard-container"
       phx-hook="DashboardRoot"
-      class="container print:max-w-full pt-6 mb-16 grid grid-cols-1 md:grid-cols-2 gap-5"
+      class="group/dashboard container print:max-w-full pt-6 mb-16 grid grid-cols-1 md:grid-cols-2 gap-5"
     >
       <div class="col-span-full flex items-center justify-end">
         <div :if={@connected?} class="flex shrink-0">
diff --git a/lib/plausible_web/live/dashboard/datepicker.ex b/lib/plausible_web/live/dashboard/datepicker.ex
index 6fbd1608e3d2..326387dd1052 100644
--- a/lib/plausible_web/live/dashboard/datepicker.ex
+++ b/lib/plausible_web/live/dashboard/datepicker.ex
@@ -50,7 +50,7 @@ defmodule PlausibleWeb.Live.Dashboard.DatePicker do
       data-current-index={@current_date_index}
       data-dates={JSON.encode!(@quick_navigation_dates)}
       data-labels={JSON.encode!(@quick_navigation_labels)}
-      class="flex shrink-0"
+      class="group flex shrink-0"
     >
       <div
         :if={@quick_navigation_dates != []}
@@ -88,7 +88,7 @@ defmodule PlausibleWeb.Live.Dashboard.DatePicker do
       <div class="min-w-36 md:relative lg:w-48 z-[99]">
         <PrimaDropdown.dropdown id="datepicker-prima-dropdown">
           <PrimaDropdown.dropdown_trigger as={&trigger_button/1}>
-            <span id="period-label" class="truncate block font-medium">
+            <span id="period-label" class="truncate block font-medium group-[.phx-navigation-loading]/dashboard:opacity-50">
               {@selected_label}
             </span>
             <Heroicons.chevron_down mini class="size-4 mt-0.5" />
diff --git a/lib/plausible_web/live/dashboard/pages.ex b/lib/plausible_web/live/dashboard/pages.ex
index f81e8705d863..0a1487ee6762 100644
--- a/lib/plausible_web/live/dashboard/pages.ex
+++ b/lib/plausible_web/live/dashboard/pages.ex
@@ -53,7 +53,7 @@ defmodule PlausibleWeb.Live.Dashboard.Pages do
 
   def render(assigns) do
     ~H"""
-    <div class="group w-full h-full border-0 overflow-hidden">
+    <div class="group/report w-full h-full border-0 overflow-hidden">
       <Tile.tile
         id="breakdown-tile-pages"
         details_route={dashboard_route(@site, @params, path: "/#{@active_tab}")}
diff --git a/lib/plausible_web/live/dashboard/sources.ex b/lib/plausible_web/live/dashboard/sources.ex
index 50e2e9d92d6b..af21c5511237 100644
--- a/lib/plausible_web/live/dashboard/sources.ex
+++ b/lib/plausible_web/live/dashboard/sources.ex
@@ -57,7 +57,7 @@ defmodule PlausibleWeb.Live.Dashboard.Sources do
 
   def render(assigns) do
     ~H"""
-    <div class="group w-full h-full border-0 overflow-hidden">
+    <div class="group/report w-full h-full border-0 overflow-hidden">
       <Tile.tile
         id="breakdown-tile-sources"
         details_route={dashboard_route(@site, @params, path: "/#{@active_tab}")}

From 34c30dcec7b18b6c3784b48b6956950de4939828 Mon Sep 17 00:00:00 2001
From: Robert Joonas <robertjoonas16@gmail.com>
Date: Fri, 16 Jan 2026 13:45:58 +0000
Subject: [PATCH 3/7] fix compile warnings

---
 .../live/components/dashboard/report_list.ex  | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/lib/plausible_web/live/components/dashboard/report_list.ex b/lib/plausible_web/live/components/dashboard/report_list.ex
index e99bd9a012c8..57005c8b34a4 100644
--- a/lib/plausible_web/live/components/dashboard/report_list.ex
+++ b/lib/plausible_web/live/components/dashboard/report_list.ex
@@ -5,9 +5,8 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
 
   use PlausibleWeb, :component
 
-  alias PlausibleWeb.Components.Dashboard.Base
-  alias PlausibleWeb.Components.Dashboard.Metric
-  alias Plausible.Stats.QueryResult
+  alias PlausibleWeb.Components.Dashboard.{Base, Metric}
+  alias Plausible.Stats.{QueryResult, ParsedQueryParams}
   alias Plausible.Stats.Dashboard.Utils
 
   @max_items 9
@@ -19,7 +18,15 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
 
   def height, do: @min_height
 
+  attr :site, Plausible.Site, required: true
+  attr :params, ParsedQueryParams, required: true
   attr :connected?, :boolean, required: true
+  attr :data_test_id, :string, required: true
+  attr :dimension, :string, required: true
+  attr :key_label, :string, required: true
+  attr :query_result, QueryResult, required: true
+  attr :external_link_fn, :any, default: nil
+
 
   def report(assigns) do
     assigns =
@@ -90,9 +97,11 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
   end
 
   defp skeleton(assigns) do
-    bar_widths = [100, 45, 25, 14, 10, 7, 5, 4, 3]
-    number_widths = [9, 8, 7, 8, 9, 7, 9, 7, 8]
-    value_widths = [22, 16, 20, 14, 19, 15, 21, 13, 17]
+    assigns =
+      assigns
+      |> assign(:bar_widths, [100, 45, 25, 14, 10, 7, 5, 4, 3])
+      |> assign(:number_widths, [9, 8, 7, 8, 9, 7, 9, 7, 8])
+      |> assign(:value_widths, [22, 16, 20, 14, 19, 15, 21, 13, 17])
 
     ~H"""
     <div
@@ -108,7 +117,7 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
         </div>
       </div>
       <div
-        :for={{bar_width, number_width, value_width} <- Enum.zip([bar_widths, number_widths, value_widths])}
+        :for={{bar_width, number_width, value_width} <- Enum.zip([@bar_widths, @number_widths, @value_widths])}
         class="flex items-center justify-between w-full"
         style={"margin-top: #{@row_gap_height}px;"}
       >

From 29741255ab6f00e76c796ace845416f5e0ccaa00 Mon Sep 17 00:00:00 2001
From: Robert Joonas <robertjoonas16@gmail.com>
Date: Fri, 16 Jan 2026 14:36:18 +0000
Subject: [PATCH 4/7] fix flicker by adding ids

---
 .../live/components/dashboard/report_list.ex     | 16 ++++++++++------
 lib/plausible_web/live/dashboard/pages.ex        |  2 +-
 lib/plausible_web/live/dashboard/sources.ex      |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/lib/plausible_web/live/components/dashboard/report_list.ex b/lib/plausible_web/live/components/dashboard/report_list.ex
index 57005c8b34a4..9b16e2f34a20 100644
--- a/lib/plausible_web/live/components/dashboard/report_list.ex
+++ b/lib/plausible_web/live/components/dashboard/report_list.ex
@@ -19,9 +19,9 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
   def height, do: @min_height
 
   attr :site, Plausible.Site, required: true
+  attr :id, :string, required: true
   attr :params, ParsedQueryParams, required: true
   attr :connected?, :boolean, required: true
-  attr :data_test_id, :string, required: true
   attr :dimension, :string, required: true
   attr :key_label, :string, required: true
   attr :query_result, QueryResult, required: true
@@ -42,13 +42,13 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
     if !assigns.connected? do
       ~H"""
       <.skeleton
+        id={"#{@id}-skeleton"}
         min_height={@min_height}
         row_height={@row_height}
         row_gap_height={@row_gap_height}
         data_container_height={@data_container_height}
         col_min_width={@col_min_width}
         max_items={@max_items}
-        data_test_id={@data_test_id}
       />
       """
     else
@@ -63,9 +63,13 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
         )
 
       ~H"""
-      <.no_data :if={@empty?} min_height={@min_height} data_test_id={@data_test_id} />
+      <.no_data :if={@empty?} min_height={@min_height} id={"#{@id}-no-data"}/>
 
-      <div :if={not @empty?} class="h-full flex flex-col group-has-[.tile-tabs.phx-hook-loading]/report:opacity-60 group-[.phx-navigation-loading]/dashboard:opacity-60" data-test-id={@data_test_id}>
+      <div
+        :if={not @empty?}
+        id={@id}
+        class="h-full flex flex-col group-has-[.tile-tabs.phx-hook-loading]/report:opacity-60 group-[.phx-navigation-loading]/dashboard:opacity-60"
+      >
         <div class="group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse group-[.phx-navigation-loading]/dashboard:animate-pulse" style={"min-height: #{@row_height}px;"}>
           <.report_header
             key_label={@key_label}
@@ -105,7 +109,7 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
 
     ~H"""
     <div
-      data-test-id={@data_test_id}
+      id={@id}
       class="h-full flex flex-col"
       style={"min-height: #{@min_height}px;"}
     >
@@ -143,7 +147,7 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
   defp no_data(assigns) do
     ~H"""
     <div
-      data-test-id={@data_test_id}
+      id={@id}
       class="w-full h-full flex flex-col justify-center group-has-[.tile-tabs.phx-hook-loading]/report:hidden"
       style={"min-height: #{@min_height}px;"}
     >
diff --git a/lib/plausible_web/live/dashboard/pages.ex b/lib/plausible_web/live/dashboard/pages.ex
index 0a1487ee6762..5f78644ee8ae 100644
--- a/lib/plausible_web/live/dashboard/pages.ex
+++ b/lib/plausible_web/live/dashboard/pages.ex
@@ -79,7 +79,7 @@ defmodule PlausibleWeb.Live.Dashboard.Pages do
 
         <ReportList.report
           site={@site}
-          data_test_id={"#{@active_tab}-report-list"}
+          id={"#{@active_tab}-report-list"}
           key_label={get_tab_info(@active_tab, :key_label)}
           dimension={get_tab_info(@active_tab, :dimension)}
           params={@params}
diff --git a/lib/plausible_web/live/dashboard/sources.ex b/lib/plausible_web/live/dashboard/sources.ex
index af21c5511237..8128c02108d4 100644
--- a/lib/plausible_web/live/dashboard/sources.ex
+++ b/lib/plausible_web/live/dashboard/sources.ex
@@ -83,7 +83,7 @@ defmodule PlausibleWeb.Live.Dashboard.Sources do
 
         <ReportList.report
           site={@site}
-          data_test_id={"#{@active_tab}-report-list"}
+          id={"#{@active_tab}-report-list"}
           key_label={get_tab_info(@active_tab, :key_label)}
           dimension={get_tab_info(@active_tab, :dimension)}
           params={@params}

From 5f489c8298f6e5297242d9e9c62606e4eb0a4e3d Mon Sep 17 00:00:00 2001
From: Robert Joonas <robertjoonas16@gmail.com>
Date: Fri, 16 Jan 2026 14:55:25 +0000
Subject: [PATCH 5/7] format and fix tests

---
 .../live/components/dashboard/report_list.ex  | 31 +++++++++++++------
 .../live/components/dashboard/tile.ex         |  6 +++-
 .../live/dashboard/datepicker.ex              |  5 ++-
 .../components/dashboard/report_list_test.exs |  5 +--
 .../live/dashboard/pages_test.exs             |  6 ++--
 5 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/lib/plausible_web/live/components/dashboard/report_list.ex b/lib/plausible_web/live/components/dashboard/report_list.ex
index 9b16e2f34a20..c064f87af799 100644
--- a/lib/plausible_web/live/components/dashboard/report_list.ex
+++ b/lib/plausible_web/live/components/dashboard/report_list.ex
@@ -27,7 +27,6 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
   attr :query_result, QueryResult, required: true
   attr :external_link_fn, :any, default: nil
 
-
   def report(assigns) do
     assigns =
       assign(assigns,
@@ -63,14 +62,17 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
         )
 
       ~H"""
-      <.no_data :if={@empty?} min_height={@min_height} id={"#{@id}-no-data"}/>
+      <.no_data :if={@empty?} min_height={@min_height} id={"#{@id}-no-data"} />
 
       <div
         :if={not @empty?}
         id={@id}
         class="h-full flex flex-col group-has-[.tile-tabs.phx-hook-loading]/report:opacity-60 group-[.phx-navigation-loading]/dashboard:opacity-60"
       >
-        <div class="group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse group-[.phx-navigation-loading]/dashboard:animate-pulse" style={"min-height: #{@row_height}px;"}>
+        <div
+          class="group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse group-[.phx-navigation-loading]/dashboard:animate-pulse"
+          style={"min-height: #{@row_height}px;"}
+        >
           <.report_header
             key_label={@key_label}
             metric_labels={@metric_labels}
@@ -78,7 +80,10 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
           />
         </div>
 
-        <div class="grow group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse group-[.phx-navigation-loading]/dashboard:animate-pulse" style={"min-height: #{@data_container_height}px;"}>
+        <div
+          class="grow group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse group-[.phx-navigation-loading]/dashboard:animate-pulse"
+          style={"min-height: #{@data_container_height}px;"}
+        >
           <.report_row
             :for={{item, item_index} <- Enum.with_index(@results)}
             link_fn={assigns[:external_link_fn]}
@@ -117,11 +122,13 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
         class="flex justify-between w-full pt-4"
         style={"height: #{@row_height}px;"}
       >
-        <div class="w-12 h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse">
-        </div>
+        <div class="w-12 h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
       </div>
       <div
-        :for={{bar_width, number_width, value_width} <- Enum.zip([@bar_widths, @number_widths, @value_widths])}
+        :for={
+          {bar_width, number_width, value_width} <-
+            Enum.zip([@bar_widths, @number_widths, @value_widths])
+        }
         class="flex items-center justify-between w-full"
         style={"margin-top: #{@row_gap_height}px;"}
       >
@@ -129,14 +136,20 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
           class="bg-gray-100/70 dark:bg-gray-800/70 rounded-sm animate-pulse relative"
           style={"height: #{@row_height}px; width: #{bar_width}%;"}
         >
-          <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse absolute top-1/2 -translate-y-1/2 left-2" style={"width: #{value_width * 4}px;"}>
+          <div
+            class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse absolute top-1/2 -translate-y-1/2 left-2"
+            style={"width: #{value_width * 4}px;"}
+          >
           </div>
         </div>
         <div
           class="flex items-center justify-end"
           style={"height: #{@row_height}px; width: 70px;"}
         >
-          <div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" style={"width: #{number_width * 4}px;"}>
+          <div
+            class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"
+            style={"width: #{number_width * 4}px;"}
+          >
           </div>
         </div>
       </div>
diff --git a/lib/plausible_web/live/components/dashboard/tile.ex b/lib/plausible_web/live/components/dashboard/tile.ex
index 111642e0d090..0b1aa36da589 100644
--- a/lib/plausible_web/live/components/dashboard/tile.ex
+++ b/lib/plausible_web/live/components/dashboard/tile.ex
@@ -95,7 +95,11 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
           {@report_label}
         </span>
       </button>
-      <div :if={!@connected?} class="h-3.5 mb-1 w-18 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
+      <div
+        :if={!@connected?}
+        class="h-3.5 mb-1 w-18 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"
+      >
+      </div>
     </div>
     """
   end
diff --git a/lib/plausible_web/live/dashboard/datepicker.ex b/lib/plausible_web/live/dashboard/datepicker.ex
index 326387dd1052..774de1662018 100644
--- a/lib/plausible_web/live/dashboard/datepicker.ex
+++ b/lib/plausible_web/live/dashboard/datepicker.ex
@@ -88,7 +88,10 @@ defmodule PlausibleWeb.Live.Dashboard.DatePicker do
       <div class="min-w-36 md:relative lg:w-48 z-[99]">
         <PrimaDropdown.dropdown id="datepicker-prima-dropdown">
           <PrimaDropdown.dropdown_trigger as={&trigger_button/1}>
-            <span id="period-label" class="truncate block font-medium group-[.phx-navigation-loading]/dashboard:opacity-50">
+            <span
+              id="period-label"
+              class="truncate block font-medium group-[.phx-navigation-loading]/dashboard:opacity-50"
+            >
               {@selected_label}
             </span>
             <Heroicons.chevron_down mini class="size-4 mt-0.5" />
diff --git a/test/plausible_web/live/components/dashboard/report_list_test.exs b/test/plausible_web/live/components/dashboard/report_list_test.exs
index 84e5e381d1d8..f6d68695effb 100644
--- a/test/plausible_web/live/components/dashboard/report_list_test.exs
+++ b/test/plausible_web/live/components/dashboard/report_list_test.exs
@@ -6,13 +6,14 @@ defmodule PlausibleWeb.Components.Dashboard.ReportListTest do
   alias Plausible.Stats.{ParsedQueryParams, QueryResult}
   import Plausible.DashboardTestUtils
 
-  @report_list_selector ~s|[data-test-id="pages-report-list"]|
+  @report_list_selector "#pages-report-list"
   @bar_indicator_selector ~s|[data-test-id="bar-indicator"]|
 
   setup do
     assigns = [
       site: build(:site),
-      data_test_id: "pages-report-list",
+      id: "pages-report-list",
+      connected?: true,
       key_label: "Page",
       dimension: "event:page",
       params: %ParsedQueryParams{},
diff --git a/test/plausible_web/live/dashboard/pages_test.exs b/test/plausible_web/live/dashboard/pages_test.exs
index 09ba90600199..7add543dbfa0 100644
--- a/test/plausible_web/live/dashboard/pages_test.exs
+++ b/test/plausible_web/live/dashboard/pages_test.exs
@@ -6,9 +6,9 @@ defmodule PlausibleWeb.Live.Dashboard.PagesTest do
 
   setup [:create_user, :log_in, :create_site]
 
-  @top_pages_report_list ~s|[data-test-id="pages-report-list"]|
-  @entry_pages_report_list ~s|[data-test-id="entry-pages-report-list"]|
-  @exit_pages_report_list ~s|[data-test-id="exit-pages-report-list"]|
+  @top_pages_report_list "#pages-report-list"
+  @entry_pages_report_list "#entry-pages-report-list"
+  @exit_pages_report_list "#exit-pages-report-list"
   @unsupported_filters_warning ~s|#breakdown-tile-pages [data-test-id="unsupported-filters-warning"]|
 
   describe "Top Pages" do

From 3ace2e93b20b45836ac9050381269f754dd2d279 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Mon, 19 Jan 2026 10:18:30 +0100
Subject: [PATCH 6/7] Remove unused code from React dashboard

---
 assets/js/dashboard/index.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/assets/js/dashboard/index.tsx b/assets/js/dashboard/index.tsx
index baeb20130f71..f68dabc9cac7 100644
--- a/assets/js/dashboard/index.tsx
+++ b/assets/js/dashboard/index.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import { LiveViewPortal } from './components/liveview-portal'
 import VisitorGraph from './stats/graph/visitor-graph'
 import Sources from './stats/sources'
 import Pages from './stats/pages'
@@ -8,11 +7,9 @@ import Devices from './stats/devices'
 import { TopBar } from './nav-menu/top-bar'
 import Behaviours from './stats/behaviours'
 import { useQueryContext } from './query-context'
-import { useSiteContext } from './site-context'
-import { hasConversionGoalFilter, isRealTimeDashboard } from './util/filters'
+import { isRealTimeDashboard } from './util/filters'
 import { useAppNavigate } from './navigation/use-app-navigate'
 import { parseSearch } from './util/url-search-params'
-import { getDomainScopedStorageKey } from './util/storage'
 
 function DashboardStats({
   importedDataInView,
@@ -22,8 +19,6 @@ function DashboardStats({
   updateImportedDataInView?: (v: boolean) => void
 }) {
   const navigate = useAppNavigate()
-  const site = useSiteContext()
-  const { query } = useQueryContext()
 
   // Handler for navigation events delegated from LiveView dashboard.
   // Necessary to emulate navigation events in LiveView with pushState

From a531682e08737902b48e4404d9cfea26547d56b9 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Mon, 19 Jan 2026 10:28:53 +0100
Subject: [PATCH 7/7] Fix JS and CSS formatting

---
 assets/css/app.css               | 10 ++++++----
 assets/js/liveview/datepicker.js |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index b6e8c874684d..da50dcce33a2 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -109,12 +109,14 @@
   .animate-pulse {
     animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
   }
-  
-  [class*="group/report"]:has(.tile-tabs.phx-hook-loading) [class*="group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse"] {
+
+  [class*='group/report']:has(.tile-tabs.phx-hook-loading)
+    [class*='group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse'] {
     animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
   }
-  
-  [class*="group/dashboard"].phx-navigation-loading [class*="group-[.phx-navigation-loading]/dashboard:animate-pulse"] {
+
+  [class*='group/dashboard'].phx-navigation-loading
+    [class*='group-[.phx-navigation-loading]/dashboard:animate-pulse'] {
     animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
   }
 }
diff --git a/assets/js/liveview/datepicker.js b/assets/js/liveview/datepicker.js
index 26f18ad95a77..009df572ddd3 100644
--- a/assets/js/liveview/datepicker.js
+++ b/assets/js/liveview/datepicker.js
@@ -55,13 +55,13 @@ export default buildHook({
     this.addListener('click', this.el, (e) => {
       if (this.dates.length) {
         const button = e.target.closest('button')
-  
+
         let updated = false
 
         if (button === this.prevPeriodButton) {
           updated = prevPeriod.bind(this)()
         }
-  
+
         if (button === this.nextPeriodButton) {
           nextPeriod.bind(this)()
           updated = nextPeriod.bind(this)()
@@ -70,7 +70,7 @@ export default buildHook({
         if (updated) {
           this.debouncedPushEvent()
         }
-  
+
         this.periodLabel.innerText = this.labels[this.currentIndex]
         this.prevPeriodButton.dataset.disabled = `${this.currentIndex == 0}`
         this.nextPeriodButton.dataset.disabled = `${this.currentIndex == this.dates.length - 1}`