[TreeView] Add lazy loading for children of tree items

docs/data/pages.ts

@@ -548,6 +548,11 @@ 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', newFeature: true },
+          {
+            pathname: '/x/react-tree-view/rich-tree-view/lazy-loading',
+            plan: 'pro',
+            newFeature: true,
+          },
           { pathname: '/x/react-tree-view/rich-tree-view/ordering', plan: 'pro', newFeature: true },
         ],
       },

docs/data/tree-view/rich-tree-view/editing/editing.md

@@ -97,3 +97,28 @@
 ```
 
 {{"demo": "ApiMethodUpdateItemLabel.js"}}
+
+## Editing lazy loaded children
+
+To store the updated item labels on your server use the `onItemLabelChange` callback function.
+
+Changes to the label are not automatically updated in the `dataSourceCache` and will need to be updated manually.
+
+```tsx
+const handleItemLabelChange = (itemId: TreeViewItemId, newLabel: string) => {
+  // update your cache here
+};
+
+<RichTreeViewPro
+  items={[]}
+  onItemLabelChange={handleItemLabelChange}
+  isItemEditable
+  dataSource={{
+    getChildrenCount: (item) => item?.childrenCount as number,
+    getTreeItems: fetchData,
+  }}
+  {...otherProps}
+/>;
+```
+
+Visit the dedicated page for [lazy loading](/x/react-tree-view/rich-tree-view/lazy-loading/#lazy-loading-and-label-editing) to read more.

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Slider from '@mui/material/Slider';
+import {
+  randomInt,
+  randomName,
+  randomId,
+  randomBoolean,
+} from '@mui/x-data-grid-generator';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+
+function getSliderAriaValueText(value) {
+  return `${value}°C`;
+}
+
+export default function BasicLazyLoading() {
+  const [latency, setLatency] = React.useState(1000);
+
+  const handleSliderChange = (_event, newLatency) => {
+    setLatency(newLatency);
+  };
+
+  const fetchData = async () => {
+    const length = randomInt(5, 10);
+    const rows = Array.from({ length }, () => ({
+      id: randomId(),
+      label: randomName({}, {}),
+      ...(randomBoolean() ? { childrenCount: length } : {}),
+    }));
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(rows);
+      }, latency);
+    });
+  };
+
+  return (
+    <Box sx={{ width: '300px' }}>
+      <Box sx={{ width: 250 }}>
+        <Typography id="latency-slider" gutterBottom>
+          Loading latency: {latency} (ms)
+        </Typography>
+        <Slider
+          value={latency}
+          onChange={handleSliderChange}
+          aria-labelledby="latency-slider"
+          min={500}
+          max={10000}
+          shiftStep={1000}
+          step={500}
+          marks
+          getAriaValueText={getSliderAriaValueText}
+          valueLabelDisplay="auto"
+        />
+      </Box>
+      <RichTreeViewPro
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        dataSource={{
+          getChildrenCount: (item) => item?.childrenCount,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Slider from '@mui/material/Slider';
+import {
+  randomInt,
+  randomName,
+  randomId,
+  randomBoolean,
+} from '@mui/x-data-grid-generator';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+
+type ItemType = TreeViewBaseItem<{
+  id: string;
+  label: string;
+  childrenCount?: number;
+}>;
+
+function getSliderAriaValueText(value: number) {
+  return `${value}°C`;
+}
+
+export default function BasicLazyLoading() {
+  const [latency, setLatency] = React.useState(1000);
+
+  const handleSliderChange = (_event: Event, newLatency: number | number[]) => {
+    setLatency(newLatency as number);
+  };
+
+  const fetchData = async (): Promise<ItemType[]> => {
+    const length: number = randomInt(5, 10);
+    const rows = Array.from({ length }, () => ({
+      id: randomId(),
+      label: randomName({}, {}),
+      ...(randomBoolean() ? { childrenCount: length } : {}),
+    }));
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(rows);
+      }, latency);
+    });
+  };
+
+  return (
+    <Box sx={{ width: '300px' }}>
+      <Box sx={{ width: 250 }}>
+        <Typography id="latency-slider" gutterBottom>
+          Loading latency: {latency} (ms)
+        </Typography>
+        <Slider
+          value={latency}
+          onChange={handleSliderChange}
+          aria-labelledby="latency-slider"
+          min={500}
+          max={10000}
+          shiftStep={1000}
+          step={500}
+          marks
+          getAriaValueText={getSliderAriaValueText}
+          valueLabelDisplay="auto"
+        />
+      </Box>
+      <RichTreeViewPro
+        items={[]}
+        experimentalFeatures={{ lazyLoading: true }}
+        dataSource={{
+          getChildrenCount: (item) => item?.childrenCount as number,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import { initialItems } from './items';
+
+export default function ErrorManagement() {
+  const [failRequests, setFailRequests] = React.useState(false);
+  const fetchData = async () => {
+    const rows = Array.from({ length: 10 }, () => ({
+      id: randomId(),
+      label: randomName({}, {}),
+      childrenCount: 10,
+    }));
+
+    // make the promise fail conditionally
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (failRequests) {
+          reject(new Error('Error fetching data'));
+        } else {
+          resolve(rows);
+        }
+      }, 1000);
+    });
+  };
+
+  return (
+    <Stack spacing={2} sx={{ width: '300px' }}>
+      <Button
+        onClick={() => setFailRequests((prev) => !prev)}
+        variant="outlined"
+        fullWidth
+      >
+        {failRequests ? 'Resolve requests' : 'Fail Requests'}
+      </Button>
+      <RichTreeViewPro
+        items={initialItems}
+        experimentalFeatures={{ lazyLoading: true }}
+        dataSource={{
+          getChildrenCount: (item) => item?.childrenCount,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { randomName, randomId } from '@mui/x-data-grid-generator';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import { initialItems, ItemType } from './items';
+
+export default function ErrorManagement() {
+  const [failRequests, setFailRequests] = React.useState(false);
+  const fetchData = async (): Promise<ItemType[]> => {
+    const rows = Array.from({ length: 10 }, () => ({
+      id: randomId(),
+      label: randomName({}, {}),
+      childrenCount: 10,
+    }));
+
+    // make the promise fail conditionally
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (failRequests) {
+          reject(new Error('Error fetching data'));
+        } else {
+          resolve(rows);
+        }
+      }, 1000);
+    });
+  };
+
+  return (
+    <Stack spacing={2} sx={{ width: '300px' }}>
+      <Button
+        onClick={() => setFailRequests((prev) => !prev)}
+        variant="outlined"
+        fullWidth
+      >
+        {failRequests ? 'Resolve requests' : 'Fail Requests'}
+      </Button>
+      <RichTreeViewPro
+        items={initialItems}
+        experimentalFeatures={{ lazyLoading: true }}
+        dataSource={{
+          getChildrenCount: (item) => item?.childrenCount as number,
+          getTreeItems: fetchData,
+        }}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,15 @@
+<Button
+  onClick={() => setFailRequests((prev) => !prev)}
+  variant="outlined"
+  fullWidth
+>
+  {failRequests ? 'Resolve requests' : 'Fail Requests'}
+</Button>
+<RichTreeViewPro
+  items={initialItems}
+  experimentalFeatures={{ lazyLoading: true }}
+  dataSource={{
+    getChildrenCount: (item) => item?.childrenCount as number,
+    getTreeItems: fetchData,
+  }}
+/>

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import {
+  randomInt,
+  randomName,
+  randomId,
+  randomBoolean,
+} from '@mui/x-data-grid-generator';
+
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+const items = [];
+
+const fetchData = async (_parentId) => {
+  const length = randomInt(5, 10);
+  const rows = Array.from({ length }, () => ({
+    id: randomId(),
+    label: randomName({}, {}),
+    ...(randomBoolean() ? { childrenCount: length } : {}),
+  }));
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(rows);
+    }, 1000);
+  });
+};
+
+export function FetchChildren() {
+  const myQueryClient = useQueryClient();
+
+  const fetchTreeItems = async (parentId) => {
+    const queryKey = parentId ? ['treeItems', parentId] : ['treeItems', 'root'];
+    const data = await myQueryClient.fetchQuery({
+      queryKey,
+      queryFn: () => fetchData(parentId),
+    });
+    return data;
+  };
+
+  return (
+    <RichTreeViewPro
+      items={items}
+      experimentalFeatures={{ lazyLoading: true }}
+      dataSource={{
+        getChildrenCount: (item) => item?.childrenCount,
+        getTreeItems: fetchTreeItems,
+      }}
+    />
+  );
+}
+
+export default function FetchingWithReactQuery() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <FetchChildren />
+    </QueryClientProvider>
+  );
+}