mui · oliviertassinari · Mar 25, 2026 · Mar 25, 2026
diff --git a/docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.js b/docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.js
@@ -83,7 +83,7 @@ function CustomToolbar() {
               ownerState={{ expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.tsx b/docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.tsx
@@ -91,7 +91,7 @@ function CustomToolbar() {
               ownerState={{ expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/quick-filter/GridPersistentQuickFilter.js b/docs/data/data-grid/components/quick-filter/GridPersistentQuickFilter.js
@@ -27,7 +27,7 @@ function CustomToolbar() {
               sx={{ width: 260 }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/quick-filter/GridPersistentQuickFilter.tsx b/docs/data/data-grid/components/quick-filter/GridPersistentQuickFilter.tsx
@@ -27,7 +27,7 @@ function CustomToolbar() {
               sx={{ width: 260 }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/quick-filter/GridQuickFilter.js b/docs/data/data-grid/components/quick-filter/GridQuickFilter.js
@@ -64,7 +64,7 @@ function CustomToolbar() {
               ownerState={{ expanded: state.expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx b/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx
@@ -72,7 +72,7 @@ function CustomToolbar() {
               ownerState={{ expanded: state.expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/quick-filter/GridUncontrolledQuickFilter.js b/docs/data/data-grid/components/quick-filter/GridUncontrolledQuickFilter.js
@@ -64,7 +64,7 @@ function CustomToolbar() {
               ownerState={{ expanded: state.expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/quick-filter/GridUncontrolledQuickFilter.tsx b/docs/data/data-grid/components/quick-filter/GridUncontrolledQuickFilter.tsx
@@ -72,7 +72,7 @@ function CustomToolbar() {
               ownerState={{ expanded: state.expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/toolbar/GridToolbar.js b/docs/data/data-grid/components/toolbar/GridToolbar.js
@@ -140,7 +140,7 @@ function CustomToolbar() {
               ownerState={{ expanded: state.expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/components/toolbar/GridToolbar.tsx b/docs/data/data-grid/components/toolbar/GridToolbar.tsx
@@ -149,7 +149,7 @@ function CustomToolbar() {
               ownerState={{ expanded: state.expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
@@ -36,7 +36,7 @@ function MyCustomToolbar() {
                   sx={{ width: 260 }}
                   inputRef={ref}
                   aria-label="Search"
-                  placeholder="Search..."
+                  placeholder="Search…"
                   size="small"
                   slotProps={{
                     input: {

diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
@@ -36,7 +36,7 @@ function MyCustomToolbar() {
                   sx={{ width: 260 }}
                   inputRef={ref}
                   aria-label="Search"
-                  placeholder="Search..."
+                  placeholder="Search…"
                   size="small"
                   slotProps={{
                     input: {

diff --git a/docs/data/data-grid/list-view/components/Toolbar.js b/docs/data/data-grid/list-view/components/Toolbar.js
@@ -116,7 +116,7 @@ export function Toolbar(props) {
                   ownerState={{ expanded: state.expanded }}
                   inputRef={ref}
                   aria-label="Search"
-                  placeholder="Search..."
+                  placeholder="Search…"
                   size="small"
                   slotProps={{
                     input: {

diff --git a/docs/data/data-grid/list-view/components/Toolbar.tsx b/docs/data/data-grid/list-view/components/Toolbar.tsx
@@ -134,7 +134,7 @@ export function Toolbar(props: ToolbarProps) {
                   ownerState={{ expanded: state.expanded }}
                   inputRef={ref}
                   aria-label="Search"
-                  placeholder="Search..."
+                  placeholder="Search…"
                   size="small"
                   slotProps={{
                     input: {

diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json
@@ -85,7 +85,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json
@@ -115,7 +115,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json
@@ -129,7 +129,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json
@@ -108,7 +108,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json
@@ -125,7 +125,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json
@@ -104,7 +104,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json
@@ -121,7 +121,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json
@@ -91,7 +91,7 @@
     },
     "renderLoading": {
       "type": { "name": "func" },
-      "default": "() => \"...\"",
+      "default": "() => \"…\"",
       "signature": {
         "type": "function() => React.ReactNode",
         "describedArgs": [],

diff --git a/docs/src/modules/components/demos/data-grid/Inventory/InventoryToolbar.tsx b/docs/src/modules/components/demos/data-grid/Inventory/InventoryToolbar.tsx
@@ -154,7 +154,7 @@ export function InventoryToolbar() {
               ownerState={{ expanded: state.expanded }}
               inputRef={ref}
               aria-label="Search"
-              placeholder="Search..."
+              placeholder="Search…"
               size="small"
               slotProps={{
                 input: {

diff --git a/docs/src/modules/components/demos/data-grid/PTOCalendar/CalendarSearch.tsx b/docs/src/modules/components/demos/data-grid/PTOCalendar/CalendarSearch.tsx
@@ -68,7 +68,7 @@ function CalendarSearch() {
             ownerState={{ expanded: state.expanded }}
             inputRef={ref}
             aria-label="Search"
-            placeholder="Search..."
+            placeholder="Search…"
             size="small"
             slotProps={{
               input: {

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -818,7 +818,7 @@ DateRangeCalendar.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx
@@ -283,7 +283,7 @@ DateRangePicker.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -328,7 +328,7 @@ DateTimeRangePicker.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
@@ -323,7 +323,7 @@ DesktopDateRangePicker.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
@@ -474,7 +474,7 @@ DesktopDateTimeRangePicker.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx
@@ -320,7 +320,7 @@ MobileDateRangePicker.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
@@ -474,7 +474,7 @@ MobileDateTimeRangePicker.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx
@@ -247,7 +247,7 @@ StaticDateRangePicker.propTypes = {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading: PropTypes.func,
   /**

diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
@@ -56,7 +56,7 @@ export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
+   * @default () => "…"
    */
   renderLoading?: () => React.ReactNode;
   /**
@@ -348,7 +348,7 @@ export function DayCalendar(inProps: DayCalendarProps) {
     onMonthSwitchingAnimationEnd,
     readOnly,
     reduceAnimations,
-    renderLoading = () => <span data-testid="loading-progress">...</span>,
+    renderLoading = () => <span data-testid="loading-progress">…</span>,
     slideDirection,
     TransitionProps,
     disablePast,

diff --git a/packages/x-scheduler/src/locales/enUS.ts b/packages/x-scheduler/src/locales/enUS.ts
@@ -68,7 +68,7 @@ const enUSDialog: EventDialogLocaleText = {
   title: 'Apply this change to:',
 
   // General
-  loading: 'Loading...',
+  loading: 'Loading…',
 };
 
 const enUSCalendar: Omit<EventCalendarLocaleText, keyof EventDialogLocaleText> = {

diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx
@@ -109,7 +109,7 @@ const RichTreeView = React.forwardRef(function RichTreeView<
   const slots = React.useMemo(() => ({ root: RichTreeViewRoot, ...inSlots }), [inSlots]);
 
   if (isLoading) {
-    return <Typography>Loading...</Typography>;
+    return <Typography>Loading…</Typography>;
   }
 
   if (error) {