node toggle performance

src/components/CustomNode/ObjectNode.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import RenderIfVisible from "react-render-if-visible";
-import { CustomNodeProps } from ".";
+import { useConfig } from "src/hocs/config";
+import { ConditionalWrapper, CustomNodeProps } from "src/components/CustomNode";
 import * as Styled from "./styles";
 
 const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
@@ -10,9 +10,11 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
   x,
   y,
 }) => {
+  const { settings } = useConfig();
+
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
-      <RenderIfVisible>
+      <ConditionalWrapper condition={settings.performance}>
         <Styled.StyledTextWrapper>
           <Styled.StyledText width={width} height={height}>
             {value.map(
@@ -32,7 +34,7 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
             )}
           </Styled.StyledText>
         </Styled.StyledTextWrapper>
-      </RenderIfVisible>
+      </ConditionalWrapper>
     </Styled.StyledForeignObject>
   );
 };

src/components/CustomNode/TextNode.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import RenderIfVisible from "react-render-if-visible";
-import { CustomNodeProps } from ".";
+import { useConfig } from "src/hocs/config";
+import { ConditionalWrapper, CustomNodeProps } from "src/components/CustomNode";
 import * as Styled from "./styles";
 
 const TextNode: React.FC<CustomNodeProps<string>> = ({
@@ -11,9 +11,11 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
   x,
   y,
 }) => {
+  const { settings } = useConfig();
+
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
-      <RenderIfVisible>
+      <ConditionalWrapper condition={settings.performance}>
         <Styled.StyledTextWrapper>
           <Styled.StyledText width={width} height={height}>
             <Styled.StyledKey
@@ -26,7 +28,7 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
             </Styled.StyledKey>
           </Styled.StyledText>
         </Styled.StyledTextWrapper>
-      </RenderIfVisible>
+      </ConditionalWrapper>
     </Styled.StyledForeignObject>
   );
 };