message: Added conditional rendering for the suspense legend icon
diff: @@ -33,7 +33,7 @@ const AtomComponentVisual: React.FC<AtomComponentVisualProps> = ({
  const [rawToggle, setRawToggle] = useState<boolean>(false);
  // useState hook to update whether a suspense component will be shown on the component graph
  - // const [hasSuspense, setHasSuspense] = useState<boolean>(false);
  + const [hasSuspense, setHasSuspense] = useState<boolean>(false);
  // Recursive function that will run through componentatomtree, filter out unecessary nodes, and create the new object appropriately
  const cleanComponentAtomTree = (
  @@ -93,6 +93,9 @@ const AtomComponentVisual: React.FC<AtomComponentVisualProps> = ({
  // setHasSuspense(false);
  document.getElementById('canvas').innerHTML = '';
  + // reset hasSuspense to false. This will get updated to true if the red borders are rendered on the component graph.
  + setHasSuspense(false);
  +
  // creating the main svg container for d3 elements
  const svgContainer = d3.select('#canvas');
  @@ -375,7 +378,7 @@ const AtomComponentVisual: React.FC<AtomComponentVisualProps> = ({
  }
  function borderColor(d:any): string {
  -
  + if(d.data.wasSuspended) setHasSuspense(true);
  return d.data.wasSuspended ? '#FF0000' : 'none';
  }
  @@ -434,8 +437,8 @@ const AtomComponentVisual: React.FC<AtomComponentVisualProps> = ({
  <p>SELECTOR</p>
  <div className="bothLegend"></div>
  <p>BOTH</p>
  - <div className="suspenseLegend"></div>
  - <p>SUSPENSE</p>
  + <div className={hasSuspense ? "suspenseLegend" : ''}></div>
  + <p>{hasSuspense?'SUSPENSE': ''}</p>
  </div>
  </div>
  );
  