feat(accordion-web): prevent content render until group is expanded

Author: Illia Obukhau

packages/pluggableWidgets/accordion-web/src/components/AccordionGroup.tsx

@@ -1,7 +1,6 @@
 import { createElement, KeyboardEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
-
 import classNames from "classnames";
-
+import { MountOnceReady } from "./MountOnceReady";
 import "../ui/accordion-main.scss";
 
 export const enum Target {
@@ -179,7 +178,7 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
                 aria-labelledby={`${props.id}HeaderButton`}
             >
                 <div ref={contentRef} className={"widget-accordion-group-content"}>
-                    {props.content}
+                    <MountOnceReady ready={!renderCollapsed}>{props.content}</MountOnceReady>
                 </div>
             </div>
         </section>

packages/pluggableWidgets/accordion-web/src/components/MountOnceReady.tsx

@@ -0,0 +1,14 @@
+import { createElement, ReactNode, useRef, Fragment } from "react";
+
+export function MountOnceReady(props: { ready: boolean; children: ReactNode }): JSX.Element | null {
+    const { ready, children } = props;
+    const isReady = useRef(false);
+
+    isReady.current = isReady.current || ready;
+
+    if (!isReady.current || !children) {
+        return null;
+    }
+
+    return <Fragment>{children}</Fragment>;
+}