Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Use loading state in the demos #15538

Merged
merged 1 commit into from
Nov 21, 2024
Merged

[docs] Use loading state in the demos #15538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/data/data-grid/api-object/UseGridApiContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function CustomToolbar() {
}

export default function UseGridApiContext() {
const { data } = useDemoData({
const { data, loading } = useDemoData({
dataSet: 'Commodity',
rowLength: 100,
maxColumns: 6,
Expand All @@ -27,6 +27,7 @@ export default function UseGridApiContext() {
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
loading={loading}
slots={{
toolbar: CustomToolbar,
}}
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/api-object/UseGridApiContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function CustomToolbar() {
}

export default function UseGridApiContext() {
const { data } = useDemoData({
const { data, loading } = useDemoData({
dataSet: 'Commodity',
rowLength: 100,
maxColumns: 6,
Expand All @@ -27,6 +27,7 @@ export default function UseGridApiContext() {
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
loading={loading}
slots={{
toolbar: CustomToolbar,
}}
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/api-object/UseGridApiContext.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<DataGrid
{...data}
loading={loading}
slots={{
toolbar: CustomToolbar,
}}
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/api-object/UseGridApiRef.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -27,6 +27,7 @@ export default function UseGridApiRef() {
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
loading={loading}
apiRef={apiRef}
pagination
paginationModel={paginationModel}
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/api-object/UseGridApiRef.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -27,6 +27,7 @@ export default function UseGridApiRef() {
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
loading={loading}
apiRef={apiRef}
pagination
paginationModel={paginationModel}
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/api-object/UseGridApiRef.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
loading={loading}
apiRef={apiRef}
pagination
paginationModel={paginationModel}
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/clipboard/ClipboardPaste.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,6 +24,7 @@ export default function ClipboardPaste() {
<div style={{ height: 500, width: '100%' }}>
<DataGridPremium
{...data}
loading={loading}
initialState={initialState}
checkboxSelection
disableRowSelectionOnClick
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/clipboard/ClipboardPaste.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,6 +24,7 @@ export default function ClipboardPaste() {
<div style={{ height: 500, width: '100%' }}>
<DataGridPremium
{...data}
loading={loading}
initialState={initialState}
checkboxSelection
disableRowSelectionOnClick
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/clipboard/ClipboardPaste.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<DataGridPremium
{...data}
loading={loading}
initialState={initialState}
checkboxSelection
disableRowSelectionOnClick
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/components/CellWithPopover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -31,6 +31,7 @@ export default function CellWithPopover() {
<div style={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
loading={loading}
slotProps={{
cell: {
onMouseEnter: handlePopoverOpen,
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/components/CellWithPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -31,6 +31,7 @@ export default function CellWithPopover() {
<div style={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
loading={loading}
slotProps={{
cell: {
onMouseEnter: handlePopoverOpen,
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/components/CustomPaginationGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function CustomPagination(props) {
}

export default function CustomPaginationGrid() {
const { data } = useDemoData({
const { data, loading } = useDemoData({
dataSet: 'Commodity',
rowLength: 100,
maxColumns: 6,
Expand All @@ -41,6 +41,7 @@ export default function CustomPaginationGrid() {
return (
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
loading={loading}
pagination
slots={{
pagination: CustomPagination,
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/components/CustomPaginationGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -46,6 +46,7 @@ export default function CustomPaginationGrid() {
return (
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
loading={loading}
pagination
slots={{
pagination: CustomPagination,
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/components/CustomPaginationGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<DataGrid
loading={loading}
pagination
slots={{
pagination: CustomPagination,
Expand Down
9 changes: 2 additions & 7 deletions docs/data/data-grid/components/ToolbarGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
9 changes: 2 additions & 7 deletions docs/data/data-grid/components/ToolbarGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
7 changes: 1 addition & 6 deletions docs/data/data-grid/components/ToolbarGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1 @@
<DataGrid
{...data}
slots={{
toolbar: GridToolbar,
}}
/>
<DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />
3 changes: 2 additions & 1 deletion docs/data/data-grid/events/DoubleClickWithCtrlToEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -19,6 +19,7 @@ export default function DoubleClickWithCtrlToEdit() {
}
}}
{...data}
loading={loading}
/>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/events/DoubleClickWithCtrlToEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -19,6 +19,7 @@ export default function DoubleClickWithCtrlToEdit() {
}
}}
{...data}
loading={loading}
/>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/events/DoubleClickWithCtrlToEdit.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@
}
}}
{...data}
loading={loading}
/>
4 changes: 2 additions & 2 deletions docs/data/data-grid/export/ExcelExportWithWebWorker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -46,7 +46,7 @@ export default function ExcelExportWithWebWorker() {
</Snackbar>
<DataGridPremium
{...data}
loading={data.rows.length === 0}
loading={loading}
rowHeight={38}
checkboxSelection
slots={{ toolbar: CustomToolbar }}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/export/ExcelExportWithWebWorker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -46,7 +46,7 @@ export default function ExcelExportWithWebWorker() {
</Snackbar>
<DataGridPremium
{...data}
loading={data.rows.length === 0}
loading={loading}
rowHeight={38}
checkboxSelection
slots={{ toolbar: CustomToolbar }}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/export/ExcelExportWithWebWorker.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</Snackbar>
<DataGridPremium
{...data}
loading={data.rows.length === 0}
loading={loading}
rowHeight={38}
checkboxSelection
slots={{ toolbar: CustomToolbar }}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/filtering-recipes/FilteredRowCount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const predefinedFilters = [
];

export default function FilteredRowCount() {
const { data } = useDemoData({
const { data, loading } = useDemoData({
dataSet: 'Commodity',
rowLength: 1000,
maxColumns: 10,
Expand Down Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/filtering-recipes/FilteredRowCount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
);
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/filtering-recipes/FilteringLocalStorage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const usePersistedFilterModel = () => {
};

export default function FilteringLocalStorage() {
const { data } = useDemoData({
const { data, loading } = useDemoData({
dataSet: 'Employee',
visibleFields: VISIBLE_FIELDS,
rowLength: 100,
Expand All @@ -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}
Expand Down
Loading
Loading