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