[TreeView] Add lazy loading for children of tree items

docs/data/data-grid/list-view/components/ListCell.js

@@ -88,6 +88,7 @@ export function ListCell(props) {
             {showSize && <CardDetail>{formatSize(params.row.size)}</CardDetail>}
           </CardDetailList>
         )}
+
         {density === 'comfortable' && (showCreatedAt || showUpdatedAt) && (
           <CardDetail>
             {showUpdatedAt && `Updated ${formatDate(params.row.updatedAt)}`}

docs/data/pages.ts

@@ -515,6 +515,7 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-tree-view/rich-tree-view/customization' },
           { pathname: '/x/react-tree-view/rich-tree-view/focus' },
           { pathname: '/x/react-tree-view/rich-tree-view/editing' },
+          { pathname: '/x/react-tree-view/rich-tree-view/lazy-loading' },
           { pathname: '/x/react-tree-view/rich-tree-view/ordering', plan: 'pro' },
         ],
       },

docs/data/tree-view/rich-tree-view/lazy-loading/BasicLazyLoading.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { randomInt, randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+const fetchData = async () => {
+  const rows = Array.from({ length: 10 }, () => ({
+    id: randomId(),
+    label: randomName({}, {}),
+    ...(randomInt(0, 1) ? { childrenCount: 10 } : {}),
+  }));
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(rows);
+    }, 1000);
+  });
+};
+
+export default function BasicLazyLoading() {
+  return (
+    <Box sx={{ width: '300px' }}>
+      <RichTreeView
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        treeViewDataSource={{
+          getChildrenCount: (item) => item?.childrenCount,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/lazy-loading/BasicLazyLoading.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { randomInt, randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+
+const fetchData = async (): Promise<
+  TreeViewBaseItem<{
+    id: string;
+    label: string;
+    childrenCount?: number;
+  }>[]
+> => {
+  const rows = Array.from({ length: 10 }, () => ({
+    id: randomId(),
+    label: randomName({}, {}),
+    ...(randomInt(0, 1) ? { childrenCount: 10 } : {}),
+  }));
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(rows);
+    }, 1000);
+  });
+};
+
+export default function BasicLazyLoading() {
+  return (
+    <Box sx={{ width: '300px' }}>
+      <RichTreeView
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        treeViewDataSource={{
+          getChildrenCount: (item) => item?.childrenCount as number,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/lazy-loading/BasicLazyLoading.tsx.preview

@@ -0,0 +1,8 @@
+<RichTreeView
+  items={[]}
+  experimentalFeatures={{ lazyLoading: true }}
+  treeViewDataSource={{
+    getChildrenCount: (item) => item?.childrenCount as number,
+    getTreeItems: fetchData,
+  }}
+/>

docs/data/tree-view/rich-tree-view/lazy-loading/ErrorManagement.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+const fetchData = async (parentId) => {
+  const rows = Array.from({ length: 10 }, () => ({
+    id: randomId(),
+    label: randomName({}, {}),
+    childrenCount: 10,
+  }));
+
+  // make the promise fail if the item has a parent
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (parentId) {
+        reject(new Error('Error fetching data'));
+      } else {
+        resolve(rows);
+      }
+    }, 1000);
+  });
+};
+
+export default function ErrorManagement() {
+  return (
+    <Box sx={{ width: '300px' }}>
+      <RichTreeView
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        treeViewDataSource={{
+          getChildrenCount: (item) => item?.childrenCount,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/lazy-loading/ErrorManagement.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem, TreeViewItemId } from '@mui/x-tree-view/models';
+
+const fetchData = async (
+  parentId?: TreeViewItemId,
+): Promise<
+  TreeViewBaseItem<{
+    id: string;
+    label: string;
+    childrenCount?: number;
+  }>[]
+> => {
+  const rows = Array.from({ length: 10 }, () => ({
+    id: randomId(),
+    label: randomName({}, {}),
+    childrenCount: 10,
+  }));
+
+  // make the promise fail if the item has a parent
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (parentId) {
+        reject(new Error('Error fetching data'));
+      } else {
+        resolve(rows);
+      }
+    }, 1000);
+  });
+};
+
+export default function ErrorManagement() {
+  return (
+    <Box sx={{ width: '300px' }}>
+      <RichTreeView
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        treeViewDataSource={{
+          getChildrenCount: (item) => item?.childrenCount as number,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/lazy-loading/ErrorManagement.tsx.preview

@@ -0,0 +1,8 @@
+<RichTreeView
+  items={[]}
+  experimentalFeatures={{ lazyLoading: true }}
+  treeViewDataSource={{
+    getChildrenCount: (item) => item?.childrenCount as number,
+    getTreeItems: fetchData,
+  }}
+/>

docs/data/tree-view/rich-tree-view/lazy-loading/LowTTLCache.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { randomInt, randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+import { TreeViewDataSourceCacheDefault } from '@mui/x-tree-view/utils';
+
+const fetchData = async () => {
+  const rows = Array.from({ length: 10 }, () => ({
+    id: randomId(),
+    label: randomName({}, {}),
+    ...(randomInt(0, 1) ? { childrenCount: 10 } : {}),
+  }));
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(rows);
+    }, 1000);
+  });
+};
+
+const lowTTLCache = new TreeViewDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds
+
+export default function LowTTLCache() {
+  return (
+    <Box sx={{ width: '300px' }}>
+      <RichTreeView
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        treeViewDataSource={{
+          getChildrenCount: (item) => item?.childrenCount,
+          getTreeItems: fetchData,
+        }}
+        treeViewDataSourceCache={lowTTLCache}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/lazy-loading/LowTTLCache.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { randomInt, randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { TreeViewDataSourceCacheDefault } from '@mui/x-tree-view/utils';
+
+const fetchData = async (): Promise<
+  TreeViewBaseItem<{
+    id: string;
+    label: string;
+    childrenCount?: number;
+  }>[]
+> => {
+  const rows = Array.from({ length: 10 }, () => ({
+    id: randomId(),
+    label: randomName({}, {}),
+    ...(randomInt(0, 1) ? { childrenCount: 10 } : {}),
+  }));
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(rows);
+    }, 1000);
+  });
+};
+
+const lowTTLCache = new TreeViewDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds
+
+export default function LowTTLCache() {
+  return (
+    <Box sx={{ width: '300px' }}>
+      <RichTreeView
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        treeViewDataSource={{
+          getChildrenCount: (item) => item?.childrenCount as number,
+          getTreeItems: fetchData,
+        }}
+        treeViewDataSourceCache={lowTTLCache}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/lazy-loading/LowTTLCache.tsx.preview

@@ -0,0 +1,9 @@
+<RichTreeView
+  items={[]}
+  experimentalFeatures={{ lazyLoading: true }}
+  treeViewDataSource={{
+    getChildrenCount: (item) => item?.childrenCount as number,
+    getTreeItems: fetchData,
+  }}
+  treeViewDataSourceCache={lowTTLCache}
+/>

docs/data/tree-view/rich-tree-view/lazy-loading/lazy-loading.md

@@ -0,0 +1,36 @@
+---
+productId: x-tree-view
+title: Rich Tree View - Lazy Loading Children
+components: RichTreeView, TreeItem
+packageName: '@mui/x-tree-view'
+githubLabel: 'component: tree view'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+---
+
+# Rich Tree View - Lazy Loading Children
+
+<p class="description">Lazy load the data from your Tree View.</p>
+
+## Basic usage
+
+To dynamically load data from the server, including lazy-loading of children, you must create a data source and pass the treeViewDataSource prop to the Rich Tree View.
+
+The data source also requires the `getChildrenCount()` attribute to handle tree data:
+
+getChildrenCount(): Returns the number of children for the item. If the children count is not available for some reason, but there are some children, returns -1.
+
+{{"demo": "BasicLazyLoading.js"}}
+
+## Data caching
+
+### Custom cache
+
+### Customize the cache lifetime
+
+The `TreeViewDataSourceCacheDefault` has a default Time To Live (`ttl`) of 5 minutes. To customize it, pass the ttl option in milliseconds to the `TreeViewDataSourceCacheDefault` constructor, and then pass it as the `treeViewDataSourceCache` prop.
+
+{{"demo": "LowTTLCache.js"}}
+
+## Error management
+
+{{"demo": "ErrorManagement.js"}}

docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

docs/pages/x/react-tree-view/rich-tree-view/lazy-loading.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/tree-view/rich-tree-view/lazy-loading/lazy-loading.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts

@@ -67,16 +67,18 @@ export class NestedDataManager {
       this.queuedRequests.add(id);
       loadingIds[id] = true;
     });
-    this.api.setState((state) => ({
-      ...state,
-      dataSource: {
-        ...state.dataSource,
-        loading: {
-          ...state.dataSource.loading,
-          ...loadingIds,
+    this.api.setState((state) => {
+      return {
+        ...state,
+        dataSource: {
+          ...state.dataSource,
+          loading: {
+            ...state.dataSource.loading,
+            ...loadingIds,
+          },
         },
-      },
-    }));
+      };
+    });
     this.processQueue();
   };
 

packages/x-tree-view/src/RichTreeView/RichTreeView.plugins.ts

@@ -25,6 +25,10 @@ import {
   useTreeViewLabel,
   UseTreeViewLabelParameters,
 } from '../internals/plugins/useTreeViewLabel';
+import {
+  useTreeViewLazyLoading,
+  UseTreeViewLazyLoadingParameters,
+} from '../internals/plugins/useTreeViewLazyLoading';
 
 export const RICH_TREE_VIEW_PLUGINS = [
   useTreeViewItems,
@@ -34,6 +38,7 @@ export const RICH_TREE_VIEW_PLUGINS = [
   useTreeViewKeyboardNavigation,
   useTreeViewIcons,
   useTreeViewLabel,
+  useTreeViewLazyLoading,
 ] as const;
 
 export type RichTreeViewPluginSignatures = ConvertPluginsIntoSignatures<
@@ -58,4 +63,5 @@ export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boo
     UseTreeViewFocusParameters,
     UseTreeViewSelectionParameters<Multiple>,
     UseTreeViewIconsParameters,
-    UseTreeViewLabelParameters<R> {}
+    UseTreeViewLabelParameters<R>,
+    UseTreeViewLazyLoadingParameters<R> {}