optimized chart loading

src/Charts/PrometheusChart.jsx

@@ -491,3 +491,4 @@ const PrometheusChart = ({ metricName }) => {
 };
 
 export default React.memo(PrometheusChart);
+

src/Components/TreeChart/tabContent.jsx

@@ -1,6 +1,7 @@
 import React, { lazy, Suspense } from "react";
 
 const PrometheusChart = lazy(() => import('../../Charts/PrometheusChart'));
+import LazyChartBatchRenderer from "../hooks/LazyChartBatchRender";
 
 // Функция для генерации названия метрики на основе id
 const getMetricName = (id) => {
@@ -35,6 +36,7 @@ const tabContent = (data) => {
         const content = (
           <div>
             <h2>{node.title}</h2>
+            <LazyChartBatchRenderer charts={node.items.map((child) => tabContent[child.id].content)} />
             <p>Контент для {node.title}.</p>
             {childrenContent}
           </div>

src/Components/hooks/LazyChartBatchRender.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+const LazyChartBatchRenderer = ({ charts, batchSize = 3, delay = 150 }) => {
+  const [visibleCharts, setVisibleCharts] = useState([]);
+
+  useEffect(() => {
+    let index = 0;
+    const timer = setInterval(() => {
+      setVisibleCharts((prev) => [
+        ...prev,
+        ...charts.slice(index, index + batchSize),
+      ]);
+      index += batchSize;
+      if (index >= charts.length) clearInterval(timer);
+    }, delay);
+
+    return () => clearInterval(timer);
+  }, [charts]);
+
+  return (
+    <>
+      {visibleCharts.map((chart, idx) => (
+        <div key={idx}>{chart}</div>
+      ))}
+    </>
+  );
+};
+
+export default LazyChartBatchRenderer;