From 98abfe6cb760e575e6a7384260653480f62d2a3c Mon Sep 17 00:00:00 2001
From: Robert Joonas <robertjoonas16@gmail.com>
Date: Thu, 28 May 2026 17:26:03 +0300
Subject: [PATCH] fix IndexBreakdown animation

---
 assets/js/dashboard/stats/reports/index-breakdown.tsx | 11 ++++++++++-
 assets/js/dashboard/stats/sources/search-terms.tsx    |  6 ++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/assets/js/dashboard/stats/reports/index-breakdown.tsx b/assets/js/dashboard/stats/reports/index-breakdown.tsx
index ffc2881ed61e..030a8d7d4a75 100644
--- a/assets/js/dashboard/stats/reports/index-breakdown.tsx
+++ b/assets/js/dashboard/stats/reports/index-breakdown.tsx
@@ -194,6 +194,10 @@ export function IndexBreakdown({
   return (
     <LazyLoader onVisible={() => setVisible(true)}>
       <IndexBreakdownRenderer<QueryResultRow>
+        // The key forces remount on every query change so that fade-in
+        // animation could trigger, even when results are instantly
+        // available from TanStack cache.
+        key={JSON.stringify(statsReportQueryKey)}
         {...apiState}
         rows={apiState.data?.results?.slice(0, MAX_ITEMS) ?? []}
         getDimensionValue={(row) => row.dimensions[0]}
@@ -453,6 +457,7 @@ export function IndexBreakdownRenderer<TRow>({
   if (!columns || isPending || (isPlaceholderData && !isRealtimeSilentUpdate)) {
     return (
       <div
+        key="loading"
         className="w-full flex flex-col justify-center"
         style={{ minHeight: `${MIN_HEIGHT}px` }}
       >
@@ -466,6 +471,7 @@ export function IndexBreakdownRenderer<TRow>({
   if (rows.length === 0) {
     return (
       <div
+        key="empty"
         className="w-full h-full flex flex-col justify-center"
         style={{ minHeight: `${MIN_HEIGHT}px` }}
       >
@@ -477,7 +483,10 @@ export function IndexBreakdownRenderer<TRow>({
   }
 
   return (
-    <div className="h-full flex flex-col opacity-100 transition-opacity duration-300 starting:opacity-0">
+    <div
+      key="data"
+      className="h-full flex flex-col opacity-100 transition-opacity duration-300 starting:opacity-0"
+    >
       <div
         style={{ height: ROW_HEIGHT }}
         className="pt-3 w-full text-xs font-medium text-gray-500 dark:text-gray-400 flex items-center"
diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index a277690abc29..6d96536882d5 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -3,6 +3,7 @@ import { numberShortFormatter } from '../../util/number-formatter'
 import RocketIcon from '../modals/rocket-icon'
 import LazyLoader from '../../components/lazy-loader'
 import { PlausibleSite, useSiteContext } from '../../site-context'
+import { useDashboardStateContext } from '../../dashboard-state-context'
 import {
   SearchTermsErrorCode,
   SearchTermsErrorPayload,
@@ -72,6 +73,7 @@ export function SearchTerms({
   onDataReady: (data: SearchTermsSuccessResponse) => void
 }) {
   const site = useSiteContext()
+  const { dashboardState } = useDashboardStateContext()
 
   const [visible, setVisible] = React.useState(false)
 
@@ -140,6 +142,10 @@ export function SearchTerms({
   return (
     <LazyLoader onVisible={() => setVisible(true)}>
       <IndexBreakdownRenderer<SearchTermsResultItem>
+        // The key forces remount on every query change so that fade-in
+        // animation could trigger, even when results are instantly
+        // available from TanStack cache.
+        key={JSON.stringify(dashboardState)}
         {...apiState}
         rows={apiState.data?.results ?? []}
         getDimensionValue={(row) => row.name}