[v11.5.x] DashboardList: Throttle the re-renders (#100046)

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();