[docs] Fix layout shift example page

[oliviertassinari]

Open https://mui.com/toolpad/core/introduction/examples/, see the paint flash / layout shift of the footer. An issue from #3383.

I noticed this on #4344.

After: https://deploy-preview-4350--mui-toolpad-docs.netlify.app/toolpad/core/introduction/examples/

[bharatkashyap]

I can see this still on the PR preview link:

layoutShift.mov

[oliviertassinari]

layoutShift.mov

@bharatkashyap This is another issue, it's a problem with how docs-infra loads the font.

Here the PR fixes the setState:

Screen.Recording.2024-11-03.at.17.28.05.mov

[Janpot]

I believe this will pull the whole folder (including files we don't need such as this source file) in the bundle. I'd prefer to just import them statically instead of doing proprietary webpack stuff. It also makes it type safe automatically.

import coreExamples from './core-examples'
import studioExamples from './studio-examples'

const EXAMPLES_BY_PRODUCT = {
  'core-examples': coreExamples,
  'studio-examples': studioExamples
}

// ...

const examples = EXAMPLES_BY_PRODUCT[examplesFile]

Or better yet, avoid the indirection, just pass the array as a prop and import the correct file on the callsite.