From e56b82bb6661bcc81c50e1ba6d27f820bba3ef6c Mon Sep 17 00:00:00 2001
From: DmitriyA <faleo1999@mail.ru>
Date: Wed, 9 Apr 2025 09:15:25 -0400
Subject: [PATCH] optimized chart loading

---
 src/Charts/PrometheusChart.jsx                |  3 +-
 src/Components/TreeChart/tabContent.jsx       |  2 ++
 src/Components/hooks/LazyChartBatchRender.jsx | 29 +++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/hooks/LazyChartBatchRender.jsx

diff --git a/src/Charts/PrometheusChart.jsx b/src/Charts/PrometheusChart.jsx
index 991a606..0553f82 100755
--- a/src/Charts/PrometheusChart.jsx
+++ b/src/Charts/PrometheusChart.jsx
@@ -490,4 +490,5 @@ const PrometheusChart = ({ metricName }) => {
     );
 };
 
-export default React.memo(PrometheusChart);
\ No newline at end of file
+export default React.memo(PrometheusChart);
+
diff --git a/src/Components/TreeChart/tabContent.jsx b/src/Components/TreeChart/tabContent.jsx
index c5353f5..4072401 100755
--- a/src/Components/TreeChart/tabContent.jsx
+++ b/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>
diff --git a/src/Components/hooks/LazyChartBatchRender.jsx b/src/Components/hooks/LazyChartBatchRender.jsx
new file mode 100644
index 0000000..a12f491
--- /dev/null
+++ b/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;