Merge pull request #275 from eccenca/feature/overviewItemPerformance-CMEM-6573

Improve performance of Tooltip and ContextMenu (CMEM-6620)

Author: andreas-schultz

CHANGELOG.md

@@ -8,6 +8,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+-   `<ContextOverlay />`
+    -   `usePlaceholder` property: can be used to display the target but include the component later when the first interaction happens, this can improve performance
+-   `<ContextMenu />`
+    -   `preventPlaceholder` property to prevent the default usage of placeholders waiting for the first user interaction before inserting the full context menu
+-   `<Tooltip />`
+    -   `usePlaceholder` property: can be used to display the target but include the full component later when the first interaction happens, this can improve performance. It is turned on for text tooltips by default.
+-   `<OverviewItemActions />`
+    -   `delayDisplayChildren` property: set a time (in ms) to delay the actual rendering of elements inside the actions container. When enabled the containing `OverviewItem` can be displayed faster. Can be used e.g. to boost performance when rendering `OverviewItemActions` with `hiddenInteractions` set to `true`.
+    -   `delaySkeleton` property to set the placeholder/skeleton as long as the delayed display is waiting to get processed
 -   `intent` property to `Button`, `FieldItem`, `FieldSet`, `Notification`, and `Spinner`
 
 ### Fixed

src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -10,7 +10,7 @@ export default {
     subcomponents: { MenuItem },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof ContextMenu>;

src/components/ContextOverlay/ContextMenu.tsx

@@ -40,8 +40,15 @@ export interface ContextMenuProps extends TestableComponent {
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>;
-    /** Disables the button to open the menu. */
+    /**
+     * Disables the button to open the menu.
+     */
     disabled?: boolean;
+    /**
+     * We use the target as placeholder before the real `<ContextMenu /` is rendered on first hover or focus event.
+     * In case of problems set this property to `true`.
+     */
+    preventPlaceholder?: boolean;
 }
 
 /**
@@ -58,27 +65,33 @@ export const ContextMenu = ({
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
+    preventPlaceholder = false,
     ...restProps
 }: ContextMenuProps) => {
+    const toggleButton =
+        typeof togglerElement === "string" ? (
+            <IconButton
+                tooltipAsTitle={tooltipAsTitle}
+                name={[togglerElement]}
+                text={togglerText}
+                large={togglerLarge}
+                disabled={!!disabled}
+                data-test-id={restProps["data-test-id"]}
+            />
+        ) : (
+            (togglerElement as ReactElement)
+        );
+
     return (
         <ContextOverlay
             {...restProps}
             {...contextOverlayProps}
             className={`${eccgui}-contextmenu ` + className}
             content={<Menu>{children}</Menu>}
+            disabled={!!disabled}
+            usePlaceholder={!preventPlaceholder}
         >
-            {typeof togglerElement === "string" ? (
-                <IconButton
-                    tooltipAsTitle={tooltipAsTitle}
-                    name={[togglerElement]}
-                    text={togglerText}
-                    large={togglerLarge}
-                    disabled={!!disabled}
-                    data-test-id={restProps["data-test-id"]}
-                />
-            ) : (
-                (togglerElement as ReactElement)
-            )}
+            {toggleButton}
         </ContextOverlay>
     );
 };

src/components/ContextOverlay/ContextOverlay.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { Popover as BlueprintPopover, PopoverProps as BlueprintPopoverProps } from "@blueprintjs/core";
+import {
+    Classes as BlueprintClasses,
+    Popover as BlueprintPopover,
+    PopoverProps as BlueprintPopoverProps,
+    Utils as BlueprintUtils,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -13,6 +18,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
      * Use it when you need to display modal dialogs out of the context overlay.
      */
     preventTopPosition?: boolean;
+    /**
+     * Use the overlay target as placeholder before the real `<ContextOverlay /` is rendered on first hover or focus event.
+     * Currently experimental.
+     */
+    usePlaceholder?: boolean;
 }
 
 /**
@@ -24,18 +34,86 @@ export const ContextOverlay = ({
     portalClassName,
     preventTopPosition,
     className = "",
-    ...restProps
+    usePlaceholder = false,
+    ...otherPopoverProps
 }: ContextOverlayProps) => {
+    const placeholderRef = React.useRef(null);
+    const eventMemory = React.useRef<undefined | "afterhover" | "afterfocus">(undefined);
+    const [placeholder, setPlaceholder] = React.useState<boolean>(
+        // use placeholder only for "simple" overlays without special states
+        !otherPopoverProps.disabled &&
+            !otherPopoverProps.defaultIsOpen &&
+            !otherPopoverProps.isOpen &&
+            otherPopoverProps.renderTarget === undefined &&
+            usePlaceholder
+    );
+
+    React.useEffect(() => {
+        if (placeholderRef.current) {
+            const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
+                eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
+                setPlaceholder(false);
+            };
+            (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
+            (placeholderRef.current as HTMLElement).addEventListener("focusin", swap);
+            return () => {
+                if (placeholderRef.current) {
+                    (placeholderRef.current as HTMLElement).removeEventListener("mouseenter", swap);
+                    (placeholderRef.current as HTMLElement).removeEventListener("focusin", swap);
+                }
+            };
+        }
+        return () => {};
+    }, [!!placeholderRef.current]);
+
+    const refocus = React.useCallback((node) => {
+        if (eventMemory.current === "afterfocus" && node) {
+            const target = node.targetRef.current.children[0];
+            if (target) {
+                target.focus();
+            }
+        }
+    }, []);
+
+    const targetClassName = `${eccgui}-contextoverlay` + (className ? ` ${className}` : "");
+
+    const displayPlaceholder = () => {
+        const PlaceholderElement = otherPopoverProps?.targetTagName ?? (otherPopoverProps?.fill ? "div" : "span");
+        const childTarget = BlueprintUtils.ensureElement(React.Children.toArray(children)[0]);
+        if (!childTarget) {
+            return null;
+        }
+        return React.createElement(
+            PlaceholderElement,
+            {
+                ...otherPopoverProps?.targetProps,
+                className: `${BlueprintClasses.POPOVER_TARGET} ${targetClassName}`,
+                ref: placeholderRef,
+            },
+            React.cloneElement(childTarget, {
+                ...childTarget.props,
+                className:
+                    childTarget.props.className ?? "" + (otherPopoverProps.fill ? ` ${BlueprintClasses.FILL}` : ""),
+                tabIndex:
+                    childTarget.props.tabIndex ??
+                    (!otherPopoverProps?.disabled && otherPopoverProps?.openOnTargetFocus ? 0 : undefined),
+            })
+        );
+    };
+
     const portalClassNameFinal =
         (preventTopPosition ? `${eccgui}-contextoverlay__portal--lowertop` : "") +
         (portalClassName ? ` ${portalClassName}` : "");
 
-    return (
+    return placeholder ? (
+        displayPlaceholder()
+    ) : (
         <BlueprintPopover
             placement="bottom"
-            {...restProps}
-            className={`${eccgui}-contextoverlay` + (className ? ` ${className}` : "")}
+            {...otherPopoverProps}
+            className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}
+            ref={refocus}
         >
             {children}
         </BlueprintPopover>

src/components/OverviewItem/OverviewItemActions.tsx

@@ -7,6 +7,18 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
      * Display it only when the parent `OverviewItem` is hovered or focused.
      */
     hiddenInteractions?: boolean;
+    /**
+     * Delay the rendering of the children by a time in milliseconds.
+     * Could be used to prevent browser freezes for the initial `OverviewItem` rendering.
+     * In general, it is better to fix the cause, i.e. action elements that are expensive to initialize/render should be
+     * optimized or replaced etc. This workaround only prevents the browser from getting blocked completely and does NOT
+     * solve the actual performance issue.
+     */
+    delayDisplayChildren?: number;
+    /**
+     * Display element while the rendering of the actual children is delayed.
+     */
+    delaySkeleton?: JSX.Element;
 }
 
 /**
@@ -17,8 +29,19 @@ export const OverviewItemActions = ({
     children,
     className = "",
     hiddenInteractions = false,
+    delayDisplayChildren = 0,
+    delaySkeleton = <></>,
     ...restProps
 }: OverviewItemActionsProps) => {
+    const [showActions, setShowActions] = React.useState(!(delayDisplayChildren > 0));
+
+    React.useEffect(() => {
+        // Delay rendering of item actions when they are hidden anyways, because rendering interaction elements like context menus currently has a large performance impact.
+        if (!showActions && delayDisplayChildren > 0) {
+            setTimeout(() => setShowActions(true), delayDisplayChildren);
+        }
+    }, []);
+
     return (
         <div
             {...restProps}
@@ -28,7 +51,7 @@ export const OverviewItemActions = ({
                 (className ? ` ${className}` : "")
             }
         >
-            {children}
+            {showActions ? children : delaySkeleton}
         </div>
     );
 };

src/components/OverviewItem/stories/OverviewItemList.stories.tsx

@@ -12,7 +12,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Should contain only `OverviewItem` elements, maybe wrapped inside cards.",
         },
     },
@@ -26,10 +26,5 @@ ItemList.args = {
     hasDivider: true,
     densityHigh: false,
     columns: 1,
-    children: [
-        <OverviewItem {...ItemExample.args} />,
-        <OverviewItem {...ItemExample.args} />,
-        <OverviewItem {...ItemExample.args} />,
-        <OverviewItem {...ItemExample.args} />,
-    ],
+    children: Array(4).fill(<OverviewItem {...ItemExample.args} />),
 };