LazyLoading Menu

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Possibility to accept children as `PanelItem[] | Promise<PanelItem>[]`
+
 ## [3.1.0] - 2023-11-14
 
 ### Removed

package.json

@@ -47,7 +47,9 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "classnames": "^2.3.2"
+    "classnames": "^2.3.2",
+    "react-loading-skeleton": "^3.3.1",
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",

src/Skeleton/LoadingSkeleton.tsx

@@ -0,0 +1,46 @@
+import { PropsWithChildren } from "react";
+import Skeleton from "react-loading-skeleton";
+
+interface LoadingSkeletonProps extends PropsWithChildren {
+  isSuccess?: boolean;
+  isLoading: boolean;
+  height?: number;
+  rows?: number;
+  cols?: number;
+  gutterX?: number;
+  gutterY?: number;
+}
+
+const LoadingSkeleton = (props: LoadingSkeletonProps) => {
+  const {
+    children,
+    isSuccess = true,
+    isLoading,
+    height = 30,
+    rows = 1,
+    cols = 1,
+    gutterX = 2,
+    gutterY = 1,
+  } = props;
+
+  return <>
+    {
+      isLoading
+        ? Array.from({ length: rows }).map((_, i) => (
+          <Skeleton
+            key={i}
+            containerClassName={`row row-cols-${cols} gx-${gutterX} gy-${gutterY}`}
+            wrapper={({ children }) => <div className="h-100 p-1">{children}</div>}
+            height={height}
+            width="18rem"
+            count={cols}
+          />
+        ))
+        : isSuccess
+          ? children
+          : <div className="alert alert-danger" role="alert">Error trying to load data</div>
+    }
+  </>
+}
+
+export { LoadingSkeleton };

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { ComponentType, createContext, ReactNode, useContext, useState } from "react";
 import { PanelItem } from "../Definitions/PanelItem";
 
@@ -108,18 +109,21 @@ export const PanelSideBarProvider = <TPanelItem,>(props: PanelSideBarMenuProvide
     theme = "light",
   } = props;
 
-  const activePanel = globalItems.find((x) => x.children?.find((y) => (y.children ? y.children.find((s) => s.active) : y.active)));
+  const activePanel = globalItems.find((x) => x.children?.filter(x => !(x instanceof Promise))
+    .find((y: PanelItem<TPanelItem>) => (y.children ? y.children.filter(x => !(x instanceof Promise)).find((s: PanelItem<TPanelItem>) => s.active) : y.active)));
   const firstActivePanel = activePanel ?? globalItems.find((x) => x.id);
 
   const getActivePanelId = () => localItems?.at(0)?.id ?? firstActivePanel?.id ?? "";
 
   const [activePanelId, setActivePanelId] = useState(getActivePanelId());
 
   const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([
-    (firstActivePanel?.children
-      ? firstActivePanel.children?.find((x) => x.children?.find((s) => s.active))
-      : firstActivePanel?.children?.find((x) => x.active)
-    )?.id ?? "",
+    ((firstActivePanel?.children
+      ? firstActivePanel
+        .children?.filter(x => !(x instanceof Promise))
+        .find((x: PanelItem<TPanelItem>) => x.children?.filter(x => !(x instanceof Promise)).find((s: PanelItem<TPanelItem>) => s.active))
+      : firstActivePanel?.children?.filter(x => !(x instanceof Promise)).find((x: PanelItem<TPanelItem>) => x.active)
+    ) as PanelItem<TPanelItem> | undefined)?.id ?? "",
   ]);
 
   const setActivePanel = (panelId: string) => setActivePanelId(panelId);
@@ -137,26 +141,26 @@ export const PanelSideBarProvider = <TPanelItem,>(props: PanelSideBarMenuProvide
   };
 
   return (
-    <PanelSideBarContext.Provider
-      value={{
-        activePanelId,
-        globalItems,
-        localItems,
-        LinkRenderer,
-        setActivePanel,
-        toggledMenuItemIds,
-        toggleMenuItem,
-        footer,
-        userDropDownMenu,
-        userDropDownMenuToggle,
-        topBarRightCustomItems,
-        topBarLeftCustomItems,
-        brand,
-        theme,
-      }}
-    >
-      {children}
-    </PanelSideBarContext.Provider>
+      <PanelSideBarContext.Provider
+        value={{
+          activePanelId,
+          globalItems,
+          localItems,
+          LinkRenderer,
+          setActivePanel,
+          toggledMenuItemIds,
+          toggleMenuItem,
+          footer,
+          userDropDownMenu,
+          userDropDownMenuToggle,
+          topBarRightCustomItems,
+          topBarLeftCustomItems,
+          brand,
+          theme,
+        }}
+      >
+        {children}
+      </PanelSideBarContext.Provider>
   );
 };
 

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Definitions/PanelItem.ts

@@ -19,7 +19,7 @@ export type PanelItem<TPanelItem = Record<string, unknown>> = TPanelItem & {
   /**
    * The panel menu items.
    */
-  children?: PanelItem<TPanelItem>[];
+  children?: PanelItem<TPanelItem>[] | Promise<PanelItem<TPanelItem>>[];
   /**
    * Whether the panel is disabled.
    */
@@ -44,4 +44,4 @@ export type PanelItem<TPanelItem = Record<string, unknown>> = TPanelItem & {
    * Whether collapse only with icon.
    */
   collapseIconOnly?: boolean;
-};
+};

src/lib/Layout/PanelSideBarLayout/PanelSideBar/LazyLoadingSideBarItem.tsx

@@ -0,0 +1,33 @@
+import { useQuery } from "react-query";
+import { PanelItem } from "./Definitions/PanelItem";
+import { LoadingSkeleton } from "src/Skeleton/LoadingSkeleton";
+import { PanelSideBarItem, PanelSideBarItemProps } from "./PanelSideBarItem";
+
+interface LazyLoadingSideBarItemProps extends Omit<PanelSideBarItemProps, "children"> {
+  queryKey: string;
+  query: Promise<PanelItem<unknown>>;
+  active?: boolean;
+}
+const LazyLoadingSideBarItem = (props: LazyLoadingSideBarItemProps) => {
+  const { depth = 0, query, LinkRenderer, onClick, toggledItemIds = [], toggledSidebar, queryKey, active } = props;
+  const { data, isLoading, isSuccess } = useQuery(queryKey, () => query, { refetchOnWindowFocus: false, refetchOnReconnect: false });
+
+  return (
+    <LoadingSkeleton isLoading={isLoading} isSuccess={isLoading || isSuccess}>
+      {data && (
+        <PanelSideBarItem
+          key={data.id}
+          children={data}
+          LinkRenderer={LinkRenderer}
+          onClick={() => onClick && onClick(data)}
+          depth={depth + 1}
+          active={active}
+          toggledItemIds={toggledItemIds}
+          toggledSidebar={toggledSidebar}
+        />
+      )}
+    </LoadingSkeleton>
+  );
+};
+
+export { LazyLoadingSideBarItem };

src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSideBarItem.tsx

@@ -1,9 +1,12 @@
+// @ts-nocheck
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { ComponentType, useState } from "react";
 import { Collapse, NavItem } from "reactstrap";
 import { LinkRendererProps } from "src/lib/SideBar/SideBarMenuContext";
 import { PanelItem } from "./../PanelSideBar/Definitions/PanelItem";
+import { ISideBarMenuItem } from "src/lib/SideBar/ISideBarMenuItem";
+import { LazyLoadingSideBarItem } from "./LazyLoadingSideBarItem";
 
 export interface PanelSideBarItemProps {
   children: PanelItem<unknown>;
@@ -20,6 +23,7 @@ const PanelSideBarItem = (props: PanelSideBarItemProps) => {
 
   const hasitem = !!item.children?.length;
   const [isOpen, setIsOpen] = useState(toggledItemIds?.includes(item.id) || item.expanded);
+
   if (item.display === false) {
     return null;
   }
@@ -28,13 +32,16 @@ const PanelSideBarItem = (props: PanelSideBarItemProps) => {
     <>
       <NavItem
         onClick={() => onClick && onClick(item)}
-        className={classNames({ "menu-open": isOpen, active: item.children?.find((s) => s.active) || item.active })}
+        className={classNames({
+          "menu-open": isOpen,
+          active: item.children?.filter((x) => !(x instanceof Promise)).find((s: PanelItem<unknown>) => s.active) || item.active,
+        })}
         style={{ paddingLeft: depth ? `${depth + 1}rem` : undefined }}
       >
         {hasitem ? (
           <div className="d-flex flex-row">
             {item.collapseIconOnly && (
-              <LinkRenderer item={item}>
+              <LinkRenderer item={item as ISideBarMenuItem}>
                 <span className="nav-link">
                   {item.icon && <FontAwesomeIcon icon={item.icon} className="me-2" />}
                   {item.title}
@@ -57,7 +64,7 @@ const PanelSideBarItem = (props: PanelSideBarItemProps) => {
           </div>
         ) : (
           <>
-            <LinkRenderer item={item}>
+            <LinkRenderer item={item as ISideBarMenuItem}>
               <span className="nav-link">
                 {item.icon && <FontAwesomeIcon icon={item.icon} className="me-2" />}
                 {item.title}
@@ -69,18 +76,25 @@ const PanelSideBarItem = (props: PanelSideBarItemProps) => {
 
       {hasitem && (
         <Collapse isOpen={isOpen} navbar className={classNames("item-menu", { "mb-1": isOpen })}>
-          {item.children?.map((childItem) => (
-            <PanelSideBarItem
-              key={childItem.id}
-              children={childItem}
-              LinkRenderer={LinkRenderer}
-              onClick={() => onClick && onClick(childItem)}
-              depth={depth + 1}
-              active={item.active}
-              toggledItemIds={toggledItemIds}
-              toggledSidebar={toggledSidebar}
-            />
-          ))}
+          {item.children?.map((childItem, index) =>
+            childItem instanceof Promise ? (
+              <LazyLoadingSideBarItem {...props} queryKey={`${item.id}_${index}`} query={childItem} active={item.active} />
+            ) : (
+              <PanelSideBarItem
+                key={childItem.id}
+                children={childItem}
+                LinkRenderer={LinkRenderer}
+                onClick={() => {
+                  console.log("clicking me");
+                  onClick && onClick(childItem);
+                }}
+                depth={depth + 1}
+                active={item.active}
+                toggledItemIds={toggledItemIds}
+                toggledSidebar={toggledSidebar}
+              />
+            ),
+          )}
         </Collapse>
       )}
     </>

src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSidebar.tsx

@@ -4,6 +4,7 @@ import { Button } from "reactstrap";
 import { usePanelSideBarContext } from "./Context/PanelSideBarContext";
 import { PanelItem } from "./Definitions/PanelItem";
 import { PanelSideBarItem } from "./PanelSideBarItem";
+import { LazyLoadingSideBarItem } from "./LazyLoadingSideBarItem";
 
 interface PanelSidebarProps {
   toggledSidebar: boolean;
@@ -57,16 +58,27 @@ export const PanelSideBar = (props: PanelSidebarProps) => {
       </div>
 
       <div className="side-nav__items">
-        {activePanel?.children?.map((item) => (
-          <PanelSideBarItem
-            key={item.id}
-            children={item}
-            LinkRenderer={LinkRenderer}
-            onClick={(menuItem) => toggleMenuItem(menuItem)}
-            toggledItemIds={toggledMenuItemIds}
-            toggledSidebar={toggledSidebar}
-          />
-        ))}
+        {activePanel?.children?.map((item, index) =>
+          item instanceof Promise ? (
+            <LazyLoadingSideBarItem
+              queryKey={`${activePanel.id}_${index}`}
+              query={item}
+              LinkRenderer={LinkRenderer}
+              onClick={(menuItem) => toggleMenuItem(menuItem)}
+              toggledItemIds={toggledMenuItemIds}
+              toggledSidebar={toggledSidebar}
+            />
+          ) : (
+            <PanelSideBarItem
+              key={item.id}
+              children={item}
+              LinkRenderer={LinkRenderer}
+              onClick={(menuItem) => toggleMenuItem(menuItem)}
+              toggledItemIds={toggledMenuItemIds}
+              toggledSidebar={toggledSidebar}
+            />
+          ),
+        )}
       </div>
     </nav>
   );