From d06d646aa1fee3887ca7a39b04d30fd989e97469 Mon Sep 17 00:00:00 2001
From: Bogdan Matei <bogdan.matei@grafana.com>
Date: Tue, 4 Feb 2025 14:14:28 +0200
Subject: [PATCH] DashboardList: Throttle the re-renders (#99982)

---
 public/app/plugins/panel/dashlist/DashList.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx
index 0b66df03ae9..e3044da47d2 100644
--- a/public/app/plugins/panel/dashlist/DashList.tsx
+++ b/public/app/plugins/panel/dashlist/DashList.tsx
@@ -1,6 +1,6 @@
 import { take } from 'lodash';
-import { useEffect, useMemo, useState } from 'react';
-import * as React from 'react';
+import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
+import { useThrottle } from 'react-use';
 
 import {
   DataLinkBuiltInVars,
@@ -107,13 +107,15 @@ export function DashList(props: PanelProps<Options>) {
   const dispatch = useDispatch();
   const navIndex = useSelector((state) => state.navIndex);
 
+  const throttledRenderCount = useThrottle(props.renderCounter, 5000);
+
   useEffect(() => {
     fetchDashboards(props.options, props.replaceVariables).then((dashes) => {
       setDashboards(dashes);
     });
-  }, [props.options, props.replaceVariables, props.renderCounter]);
+  }, [props.options, props.replaceVariables, throttledRenderCount]);
 
-  const toggleDashboardStar = async (e: React.SyntheticEvent, dash: Dashboard) => {
+  const toggleDashboardStar = async (e: SyntheticEvent, dash: Dashboard) => {
     const { uid, title, url } = dash;
     e.preventDefault();
     e.stopPropagation();