Skip to content

Commit

Permalink
[docs] Fix image layout shift when loading
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Feb 28, 2024
1 parent ea7c4ef commit ddb7c68
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 19 deletions.
43 changes: 24 additions & 19 deletions docs/data/introduction/support/support.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,30 @@ We require bug reports to be accompanied by a **minimal reproduction**.
It significantly increases the odds of fixing the problem.
You have a few possible options to provide it:

- You can browse the documentation, find an example close to your use case, and then open it in a live editor:
<a href="/x/react-date-pickers/getting-started/#render-your-first-component">
<span class="only-light-mode">
<img src="/static/docs-infra/forking-an-example.png" alt="Forking an example" loading="lazy" width="1548" height="606" style="display: block; max-width: 774px;">
</span>
<span class="only-dark-mode">
<img src="/static/docs-infra/forking-an-example-dark.png" alt="Forking an example" loading="lazy" width="1548" height="606" style="display: block; max-width: 774px;">
</span>
</a>

- [Data Grid](/x/react-data-grid/#mit-version-free-forever)
- [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component)
- [Charts](/x/react-charts/getting-started/#single-charts)
- [Tree View](/x/react-tree-view/#simple-tree-view)

- You can use a starter template to build a reproduction case with:
<!-- #default-branch-switch -->
- A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/next/bug-reproductions/x-data-grid?file=src/index.tsx)
- A plain React [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts) template
#### Use the live editors

You can browse the documentation, find an example close to your use case, and then open it in a live editor:

<a href="/x/react-date-pickers/getting-started/#render-your-first-component">
<span class="only-light-mode">
<img src="/static/docs-infra/forking-an-example.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">
</span>
<span class="only-dark-mode">
<img src="/static/docs-infra/forking-an-example-dark.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">
</span>
</a>

- [Data Grid](/x/react-data-grid/#mit-version-free-forever)
- [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component)
- [Charts](/x/react-charts/getting-started/#single-charts)
- [Tree View](/x/react-tree-view/#simple-tree-view)

#### Use starter templates

You can use a starter template to build a reproduction case with:
<!-- #default-branch-switch -->
- A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/next/bug-reproductions/x-data-grid?file=src/index.tsx)
- A plain React [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts) template

## Stack Overflow

Expand Down
Binary file modified docs/public/static/docs-infra/forking-an-example-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/static/docs-infra/forking-an-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ddb7c68

Please sign in to comment.