[docs] Use loading state in the demos (#15512)

mui · Nov 21, 2024 · 41d519d · 41d519d
1 parent 4aca5f5
commit 41d519d
Show file tree

Hide file tree

Showing 177 changed files with 354 additions and 277 deletions.
diff --git a/docs/data/data-grid/api-object/UseGridApiContext.js b/docs/data/data-grid/api-object/UseGridApiContext.js
@@ -17,7 +17,7 @@ function CustomToolbar() {
 }
 
 export default function UseGridApiContext() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -27,6 +27,7 @@ export default function UseGridApiContext() {
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
+        loading={loading}
         slots={{
           toolbar: CustomToolbar,
         }}

diff --git a/docs/data/data-grid/api-object/UseGridApiContext.tsx b/docs/data/data-grid/api-object/UseGridApiContext.tsx
@@ -17,7 +17,7 @@ function CustomToolbar() {
 }
 
 export default function UseGridApiContext() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -27,6 +27,7 @@ export default function UseGridApiContext() {
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
+        loading={loading}
         slots={{
           toolbar: CustomToolbar,
         }}

diff --git a/docs/data/data-grid/api-object/UseGridApiContext.tsx.preview b/docs/data/data-grid/api-object/UseGridApiContext.tsx.preview
@@ -1,5 +1,6 @@
 <DataGrid
   {...data}
+  loading={loading}
   slots={{
     toolbar: CustomToolbar,
   }}

diff --git a/docs/data/data-grid/api-object/UseGridApiRef.js b/docs/data/data-grid/api-object/UseGridApiRef.js
@@ -6,7 +6,7 @@ import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function UseGridApiRef() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -27,6 +27,7 @@ export default function UseGridApiRef() {
       <Box sx={{ height: 400, width: '100%' }}>
         <DataGrid
           {...data}
+          loading={loading}
           apiRef={apiRef}
           pagination
           paginationModel={paginationModel}

diff --git a/docs/data/data-grid/api-object/UseGridApiRef.tsx b/docs/data/data-grid/api-object/UseGridApiRef.tsx
@@ -6,7 +6,7 @@ import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function UseGridApiRef() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -27,6 +27,7 @@ export default function UseGridApiRef() {
       <Box sx={{ height: 400, width: '100%' }}>
         <DataGrid
           {...data}
+          loading={loading}
           apiRef={apiRef}
           pagination
           paginationModel={paginationModel}

diff --git a/docs/data/data-grid/api-object/UseGridApiRef.tsx.preview b/docs/data/data-grid/api-object/UseGridApiRef.tsx.preview
@@ -2,6 +2,7 @@
 <Box sx={{ height: 400, width: '100%' }}>
   <DataGrid
     {...data}
+    loading={loading}
     apiRef={apiRef}
     pagination
     paginationModel={paginationModel}

diff --git a/docs/data/data-grid/clipboard/ClipboardPaste.js b/docs/data/data-grid/clipboard/ClipboardPaste.js
@@ -3,7 +3,7 @@ import { DataGridPremium } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function ClipboardPaste() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 20,
@@ -24,6 +24,7 @@ export default function ClipboardPaste() {
     <div style={{ height: 500, width: '100%' }}>
       <DataGridPremium
         {...data}
+        loading={loading}
         initialState={initialState}
         checkboxSelection
         disableRowSelectionOnClick

diff --git a/docs/data/data-grid/clipboard/ClipboardPaste.tsx b/docs/data/data-grid/clipboard/ClipboardPaste.tsx
@@ -3,7 +3,7 @@ import { DataGridPremium } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function ClipboardPaste() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 20,
@@ -24,6 +24,7 @@ export default function ClipboardPaste() {
     <div style={{ height: 500, width: '100%' }}>
       <DataGridPremium
         {...data}
+        loading={loading}
         initialState={initialState}
         checkboxSelection
         disableRowSelectionOnClick

diff --git a/docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview
@@ -1,5 +1,6 @@
 <DataGridPremium
   {...data}
+  loading={loading}
   initialState={initialState}
   checkboxSelection
   disableRowSelectionOnClick

diff --git a/docs/data/data-grid/components/CellWithPopover.js b/docs/data/data-grid/components/CellWithPopover.js
@@ -5,7 +5,7 @@ import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 
 export default function CellWithPopover() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 4,
@@ -31,6 +31,7 @@ export default function CellWithPopover() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
+        loading={loading}
         slotProps={{
           cell: {
             onMouseEnter: handlePopoverOpen,

diff --git a/docs/data/data-grid/components/CellWithPopover.tsx b/docs/data/data-grid/components/CellWithPopover.tsx
@@ -5,7 +5,7 @@ import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 
 export default function CellWithPopover() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 4,
@@ -31,6 +31,7 @@ export default function CellWithPopover() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
+        loading={loading}
         slotProps={{
           cell: {
             onMouseEnter: handlePopoverOpen,

diff --git a/docs/data/data-grid/components/CustomPaginationGrid.js b/docs/data/data-grid/components/CustomPaginationGrid.js
@@ -32,7 +32,7 @@ function CustomPagination(props) {
 }
 
 export default function CustomPaginationGrid() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -41,6 +41,7 @@ export default function CustomPaginationGrid() {
   return (
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
+        loading={loading}
         pagination
         slots={{
           pagination: CustomPagination,

diff --git a/docs/data/data-grid/components/CustomPaginationGrid.tsx b/docs/data/data-grid/components/CustomPaginationGrid.tsx
@@ -37,7 +37,7 @@ function CustomPagination(props: any) {
 }
 
 export default function CustomPaginationGrid() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -46,6 +46,7 @@ export default function CustomPaginationGrid() {
   return (
     <Box sx={{ height: 400, width: '100%' }}>
       <DataGrid
+        loading={loading}
         pagination
         slots={{
           pagination: CustomPagination,

diff --git a/docs/data/data-grid/components/CustomPaginationGrid.tsx.preview b/docs/data/data-grid/components/CustomPaginationGrid.tsx.preview
@@ -1,4 +1,5 @@
 <DataGrid
+  loading={loading}
   pagination
   slots={{
     pagination: CustomPagination,

diff --git a/docs/data/data-grid/components/ToolbarGrid.js b/docs/data/data-grid/components/ToolbarGrid.js
@@ -3,20 +3,15 @@ import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function ToolbarGrid() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
   });
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid
-        {...data}
-        slots={{
-          toolbar: GridToolbar,
-        }}
-      />
+      <DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />
     </div>
   );
 }
diff --git a/docs/data/data-grid/components/ToolbarGrid.tsx b/docs/data/data-grid/components/ToolbarGrid.tsx
@@ -3,20 +3,15 @@ import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function ToolbarGrid() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
   });
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid
-        {...data}
-        slots={{
-          toolbar: GridToolbar,
-        }}
-      />
+      <DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />
     </div>
   );
 }
diff --git a/docs/data/data-grid/components/ToolbarGrid.tsx.preview b/docs/data/data-grid/components/ToolbarGrid.tsx.preview
@@ -1,6 +1 @@
-<DataGrid
-  {...data}
-  slots={{
-    toolbar: GridToolbar,
-  }}
-/>
+<DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />
diff --git a/docs/data/data-grid/events/DoubleClickWithCtrlToEdit.js b/docs/data/data-grid/events/DoubleClickWithCtrlToEdit.js
@@ -3,7 +3,7 @@ import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function DoubleClickWithCtrlToEdit() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -19,6 +19,7 @@ export default function DoubleClickWithCtrlToEdit() {
           }
         }}
         {...data}
+        loading={loading}
       />
     </div>
   );

diff --git a/docs/data/data-grid/events/DoubleClickWithCtrlToEdit.tsx b/docs/data/data-grid/events/DoubleClickWithCtrlToEdit.tsx
@@ -3,7 +3,7 @@ import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function DoubleClickWithCtrlToEdit() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 100,
     maxColumns: 6,
@@ -19,6 +19,7 @@ export default function DoubleClickWithCtrlToEdit() {
           }
         }}
         {...data}
+        loading={loading}
       />
     </div>
   );

diff --git a/docs/data/data-grid/events/DoubleClickWithCtrlToEdit.tsx.preview b/docs/data/data-grid/events/DoubleClickWithCtrlToEdit.tsx.preview
@@ -5,4 +5,5 @@
     }
   }}
   {...data}
+  loading={loading}
 />
diff --git a/docs/data/data-grid/export/ExcelExportWithWebWorker.js b/docs/data/data-grid/export/ExcelExportWithWebWorker.js
@@ -31,7 +31,7 @@ function SlideTransition(props) {
 export default function ExcelExportWithWebWorker() {
   const [inProgress, setInProgress] = React.useState(false);
 
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 10000,
     editable: true,
@@ -46,7 +46,7 @@ export default function ExcelExportWithWebWorker() {
       </Snackbar>
       <DataGridPremium
         {...data}
-        loading={data.rows.length === 0}
+        loading={loading}
         rowHeight={38}
         checkboxSelection
         slots={{ toolbar: CustomToolbar }}

diff --git a/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx b/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx
@@ -31,7 +31,7 @@ function SlideTransition(props: SlideProps) {
 export default function ExcelExportWithWebWorker() {
   const [inProgress, setInProgress] = React.useState(false);
 
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 10000,
     editable: true,
@@ -46,7 +46,7 @@ export default function ExcelExportWithWebWorker() {
       </Snackbar>
       <DataGridPremium
         {...data}
-        loading={data.rows.length === 0}
+        loading={loading}
         rowHeight={38}
         checkboxSelection
         slots={{ toolbar: CustomToolbar }}

diff --git a/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx.preview b/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx.preview
@@ -5,7 +5,7 @@
 </Snackbar>
 <DataGridPremium
   {...data}
-  loading={data.rows.length === 0}
+  loading={loading}
   rowHeight={38}
   checkboxSelection
   slots={{ toolbar: CustomToolbar }}

diff --git a/docs/data/data-grid/filtering-recipes/FilteredRowCount.js b/docs/data/data-grid/filtering-recipes/FilteredRowCount.js
@@ -31,7 +31,7 @@ const predefinedFilters = [
 ];
 
 export default function FilteredRowCount() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 1000,
     maxColumns: 10,
@@ -81,7 +81,7 @@ export default function FilteredRowCount() {
         })}
       </Stack>
       <Box sx={{ height: 520, width: '100%' }}>
-        <DataGridPro {...data} loading={data.rows.length === 0} apiRef={apiRef} />
+        <DataGridPro {...data} loading={loading} apiRef={apiRef} />
       </Box>
     </div>
   );

diff --git a/docs/data/data-grid/filtering-recipes/FilteredRowCount.tsx b/docs/data/data-grid/filtering-recipes/FilteredRowCount.tsx
@@ -31,7 +31,7 @@ const predefinedFilters: { label: string; filterModel: GridFilterModel }[] = [
 ];
 
 export default function FilteredRowCount() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 1000,
     maxColumns: 10,
@@ -81,7 +81,7 @@ export default function FilteredRowCount() {
         })}
       </Stack>
       <Box sx={{ height: 520, width: '100%' }}>
-        <DataGridPro {...data} loading={data.rows.length === 0} apiRef={apiRef} />
+        <DataGridPro {...data} loading={loading} apiRef={apiRef} />
       </Box>
     </div>
   );

diff --git a/docs/data/data-grid/filtering-recipes/FilteringLocalStorage.js b/docs/data/data-grid/filtering-recipes/FilteringLocalStorage.js
@@ -57,7 +57,7 @@ const usePersistedFilterModel = () => {
 };
 
 export default function FilteringLocalStorage() {
-  const { data } = useDemoData({
+  const { data, loading } = useDemoData({
     dataSet: 'Employee',
     visibleFields: VISIBLE_FIELDS,
     rowLength: 100,
@@ -76,6 +76,7 @@ export default function FilteringLocalStorage() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
+        loading={loading}
         slots={{ toolbar: GridToolbar }}
         filterModel={filterModel}
         onFilterModelChange={onFilterModelChange}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,5 @@ @@
         }
       }}
       {...data}
+      loading={loading}
     />