Rename structure and try to implement a loader for demo tag

docs/pages/blog/developer-survey-impacts.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutSurvey from 'docs/src/modules/components/TopLayoutSurvey';
+import { docs } from './developer-survey-impacts.md?@mui/markdown';
+
+export default function Page() {
+  return <TopLayoutSurvey docs={docs} />;
+}

docs/pages/blog/survey-charts/demo.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import {
+  DataGridPremium,
+  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
+  GridToolbar,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const visibleFields = [
+  'commodity',
+  'quantity',
+  'filledQuantity',
+  'status',
+  'isFilled',
+  'unitPrice',
+  'unitPriceCurrency',
+  'subTotal',
+  'feeRate',
+  'feeAmount',
+  'incoTerm',
+];
+
+export default function DataGridPremiumDemo() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    editable: true,
+    visibleFields,
+  });
+  const apiRef = useGridApiRef();
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      ...data.initialState,
+      rowGrouping: {
+        ...data.initialState?.rowGrouping,
+        model: ['commodity'],
+      },
+      sorting: {
+        sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
+      },
+      aggregation: {
+        model: {
+          quantity: 'sum',
+        },
+      },
+    },
+  });
+
+  return (
+    <Box sx={{ height: 520, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        loading={loading}
+        disableRowSelectionOnClick
+        initialState={initialState}
+        slots={{ toolbar: GridToolbar }}
+      />
+    </Box>
+  );
+}