chore(accordion-web): replace MountOnceReady with renderContent flag

Author: Illia Obukhau

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

@@ -1,6 +1,5 @@
 import { createElement, KeyboardEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
-import { MountOnceReady } from "./MountOnceReady";
 import "../ui/accordion-main.scss";
 
 /* eslint-disable no-unused-vars */
@@ -49,6 +48,9 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
     const contentWrapperRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
     const lazyRender = loadContent === "whenExpanded";
+    const renderContent = useRef(false);
+
+    renderContent.current ||= !lazyRender || !renderCollapsed;
 
     const completeTransitioning = useCallback((): void => {
         if (contentWrapperRef.current && rootRef.current && animatingContent.current) {
@@ -189,11 +191,7 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
                 aria-labelledby={`${props.id}HeaderButton`}
             >
                 <div ref={contentRef} className={"widget-accordion-group-content"}>
-                    {lazyRender ? (
-                        <MountOnceReady ready={!renderCollapsed}>{props.content}</MountOnceReady>
-                    ) : (
-                        props.content
-                    )}
+                    {renderContent.current ? props.content : null}
                 </div>
             </div>
         </section>

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

@@ -10,6 +10,8 @@ export type HeaderRenderModeEnum = "text" | "custom";
 
 export type HeaderHeadingEnum = "headingOne" | "headingTwo" | "headingThree" | "headingFour" | "headingFive" | "headingSix";
 
+export type LoadContentEnum = "always" | "whenExpanded";
+
 export type InitialCollapsedStateEnum = "expanded" | "collapsed" | "dynamic";
 
 export interface GroupsType {
@@ -20,6 +22,7 @@ export interface GroupsType {
     content?: ReactNode;
     visible: DynamicValue<boolean>;
     dynamicClass?: DynamicValue<string>;
+    loadContent: LoadContentEnum;
     initialCollapsedState: InitialCollapsedStateEnum;
     initiallyCollapsed: DynamicValue<boolean>;
     collapsed?: EditableValue<boolean>;
@@ -37,6 +40,7 @@ export interface GroupsPreviewType {
     content: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
     visible: string;
     dynamicClass: string;
+    loadContent: LoadContentEnum;
     initialCollapsedState: InitialCollapsedStateEnum;
     initiallyCollapsed: string;
     collapsed: string;