From 0c749a985951ae5f25953fdb9c31c3fb3199a5a5 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Fri, 4 Oct 2024 19:15:25 +0200
Subject: [PATCH] Fix rerender issue with sunbuster component

---
 .../Availability/AvailabilitySheetCreate.tsx         |  2 +-
 src/components/Availability/AvailabilitySunburst.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Availability/AvailabilitySheetCreate.tsx b/src/components/Availability/AvailabilitySheetCreate.tsx
index 84b3aa5..3fc91e7 100644
--- a/src/components/Availability/AvailabilitySheetCreate.tsx
+++ b/src/components/Availability/AvailabilitySheetCreate.tsx
@@ -140,7 +140,7 @@ export function AvailabilitySheetCreate({
         className={className}
       />
 
-      <Sheets open={state.open} onClose={onClose} mode="bottom">
+      <Sheets open={state.open} onClose={onClose}>
         <Stepper
           className="availabilityCreate"
           titles={steps.current}
diff --git a/src/components/Availability/AvailabilitySunburst.tsx b/src/components/Availability/AvailabilitySunburst.tsx
index 918dc60..5179d4a 100644
--- a/src/components/Availability/AvailabilitySunburst.tsx
+++ b/src/components/Availability/AvailabilitySunburst.tsx
@@ -2,7 +2,7 @@ import { CodexNodeSpace } from "@codex-storage/sdk-js";
 import { Times } from "../../utils/times";
 import { Strings } from "../../utils/strings";
 import { PrettyBytes } from "../../utils/bytes";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { CallbackDataParams, ECBasicOption } from "echarts/types/dist/shared";
 import * as echarts from "echarts";
 import { availabilityColors } from "./availability.colors";
@@ -19,10 +19,12 @@ export function AvailabilitySunburst({ availabilities, space }: Props) {
   const chart = useRef<echarts.EChartsType | null>(null);
   const [, setRefresher] = useState(Date.now());
 
-  if (div.current && !chart.current) {
-    chart.current = echarts.init(div.current);
-    setRefresher(Date.now());
-  }
+  useEffect(() => {
+    if (div.current && !chart.current) {
+      chart.current = echarts.init(div.current);
+      setRefresher(Date.now());
+    }
+  }, [chart, div]);
 
   const data = availabilities.map((a, index) => {
     return {