feat(accordion-web): add "Load content" group property

Author: Illia Obukhau

packages/pluggableWidgets/accordion-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added new group property ("Load content") which controls how widgets should be rendered. Use this prop if you have problems with page load time.
+
 ## [2.1.2] - 2022-07-14
 
 ### Fixed

packages/pluggableWidgets/accordion-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "accordion-web",
   "widgetName": "Accordion",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "A Mendix pluggable widget to display expandable list items.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",

packages/pluggableWidgets/accordion-web/src/Accordion.editorPreview.tsx

@@ -58,6 +58,7 @@ export function preview(props: AccordionPreviewProps): ReactElement {
     const expandIcon = mapPreviewIconToWebIcon(props.expandIcon);
     const collapseIcon = mapPreviewIconToWebIcon(props.collapseIcon);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const generateIcon = useIconGenerator(
         props.animateIcon,
         {

packages/pluggableWidgets/accordion-web/src/Accordion.tsx

@@ -62,7 +62,8 @@ function translateGroups(groups: AccordionContainerProps["groups"]): AccordionGr
                     : group.initialCollapsedState === "collapsed",
             visible: group.visible.value!,
             dynamicClassName: group.dynamicClass?.value,
-            onToggleCompletion: group.collapsed?.setValue
+            onToggleCompletion: group.collapsed?.setValue,
+            loadContent: group.loadContent
         };
     });
 }

packages/pluggableWidgets/accordion-web/src/Accordion.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<widget id="com.mendix.widget.web.accordion.Accordion" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../../node_modules/mendix/custom_widget.xsd">
+<widget id="com.mendix.widget.web.accordion.Accordion" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
     <name>Accordion</name>
     <description>Toggle the display of sections of content.</description>
     <studioProCategory>Structure</studioProCategory>
@@ -63,6 +63,14 @@
                                 <description />
                                 <returnType type="String" />
                             </property>
+                            <property key="loadContent" type="enumeration" defaultValue="always">
+                                <caption>Load content</caption>
+                                <description>This property determines when the widgets should be rendered and data is fetched. The “Always” option will always load the widgets regardless whether the group is expanded. The “When expanded” option can reduce the initial (page) load time, but will increase the load time when expanding the group.</description>
+                                <enumerationValues>
+                                    <enumerationValue key="always">Always</enumerationValue>
+                                    <enumerationValue key="whenExpanded">When expanded</enumerationValue>
+                                </enumerationValues>
+                            </property>
                         </propertyGroup>
                         <propertyGroup caption="State">
                             <property key="initialCollapsedState" type="enumeration" defaultValue="collapsed">

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

@@ -15,7 +15,10 @@ import { AccordionContainerProps } from "../../typings/AccordionProps";
 import classNames from "classnames";
 
 export type AccordionGroups = Array<
-    Pick<AccordionGroupProps, "header" | "content" | "visible" | "dynamicClassName" | "onToggleCompletion"> & {
+    Pick<
+        AccordionGroupProps,
+        "header" | "content" | "visible" | "dynamicClassName" | "onToggleCompletion" | "loadContent"
+    > & {
         collapsed?: boolean;
         initiallyCollapsed?: boolean;
     }
@@ -165,6 +168,7 @@ function AccordionGroupWrapper(props: AccordionGroupWrapperProps): ReactElement
             animateContent={props.animateContent}
             generateHeaderIcon={props.generateHeaderIcon}
             showHeaderIcon={props.showHeaderIcon}
+            loadContent={props.loadContent}
         />
     );
 }

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

@@ -3,12 +3,14 @@ import classNames from "classnames";
 import { MountOnceReady } from "./MountOnceReady";
 import "../ui/accordion-main.scss";
 
+/* eslint-disable no-unused-vars */
 export const enum Target {
     FIRST = "first",
     LAST = "last",
     PREVIOUS = "previous",
     NEXT = "next"
 }
+/* eslint-enable no-unused-vars */
 
 export type AccordionGroupIcon = { icon: ReactNode } | { expandIcon: ReactNode; collapseIcon: ReactNode };
 
@@ -26,10 +28,18 @@ export interface AccordionGroupProps {
     animateContent?: boolean;
     generateHeaderIcon?: (collapsed: boolean) => ReactElement;
     showHeaderIcon?: "right" | "left" | "no";
+    loadContent?: "always" | "whenExpanded";
 }
 
 export function AccordionGroup(props: AccordionGroupProps): ReactElement | null {
-    const { animateContent, changeFocus, showHeaderIcon, toggleCollapsed, onToggleCompletion } = props;
+    const {
+        animateContent,
+        changeFocus,
+        showHeaderIcon,
+        toggleCollapsed,
+        onToggleCompletion,
+        loadContent = "always"
+    } = props;
 
     const [renderCollapsed, setRenderCollapsed] = useState(props.collapsed);
     const previousRenderCollapsed = useRef(renderCollapsed);
@@ -38,6 +48,7 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
     const rootRef = useRef<HTMLDivElement>(null);
     const contentWrapperRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
+    const lazyRender = loadContent === "whenExpanded";
 
     const completeTransitioning = useCallback((): void => {
         if (contentWrapperRef.current && rootRef.current && animatingContent.current) {
@@ -178,7 +189,11 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
                 aria-labelledby={`${props.id}HeaderButton`}
             >
                 <div ref={contentRef} className={"widget-accordion-group-content"}>
-                    <MountOnceReady ready={!renderCollapsed}>{props.content}</MountOnceReady>
+                    {lazyRender ? (
+                        <MountOnceReady ready={!renderCollapsed}>{props.content}</MountOnceReady>
+                    ) : (
+                        props.content
+                    )}
                 </div>
             </div>
         </section>

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

@@ -0,0 +1,70 @@
+import "@testing-library/jest-dom";
+import { createElement } from "react";
+import { render, screen } from "@testing-library/react";
+import { MountOnceReady } from "../MountOnceReady";
+
+describe("MountOnceReady", () => {
+    it("do not mount children if ready prop is always 'false'", () => {
+        const max = 10;
+        const min = 3;
+        const rerenderCount = Math.floor(Math.random() * (max - min)) + min;
+        const text = "Should not be mounted";
+        const child = (): JSX.Element => <div>{text}</div>;
+
+        const { rerender } = render(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+        expect(screen.queryByText(text)).toBeNull();
+
+        for (let n = 0; n < rerenderCount; n += 1) {
+            rerender(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+            expect(screen.queryByText(text)).toBeNull();
+        }
+    });
+
+    it("mount content once ready prop became 'true'", async () => {
+        const text = "Should be mounted";
+        const child = (): JSX.Element => <div>{text}</div>;
+
+        const { rerender } = render(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+        expect(screen.queryByText(text)).toBeNull();
+
+        rerender(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+        expect(screen.queryByText(text)).toBeNull();
+
+        rerender(<MountOnceReady ready>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+    });
+
+    it("stay mounted if ready change from 'true' to 'false'", async () => {
+        const text = "Should be mounted";
+        const child = (): JSX.Element => <div>{text}</div>;
+
+        const { rerender } = render(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+        expect(screen.queryByText(text)).toBeNull();
+
+        rerender(<MountOnceReady ready>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+
+        rerender(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+
+        rerender(<MountOnceReady ready>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+
+        rerender(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+    });
+
+    it("mount right away if ready is 'true' on initial render", async () => {
+        const text = "Should be right away";
+        const child = (): JSX.Element => <div>{text}</div>;
+
+        const { rerender } = render(<MountOnceReady ready>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+
+        rerender(<MountOnceReady ready={false}>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+
+        rerender(<MountOnceReady ready>{child()}</MountOnceReady>);
+        expect(await screen.findByText(text)).toBeVisible();
+    });
+});

packages/pluggableWidgets/accordion-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Accordion" version="2.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Accordion" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Accordion.xml" />
         </widgetFiles>