fix: TextPlaceholder is empty in Safari (#3128)

* fix: TextPlaceholder is empty in Safari

* add aria-hidden

* hide text on font load fail

Author: i-runets

changelog.md

@@ -5,6 +5,8 @@
 
 **What's Fixed**
 * [RadioInput]: fixed the checked-state dot rendering off-center and with fractional pixel sizes at fractional browser/OS zoom levels.
+* [TextPlaceholder]: fixed placeholder bars not being visible in Safari ([#3127](https://github.com/epam/UUI/issues/3127))
+
 
 # 6.5.2 - 20.08.2026
 

uui-core/src/helpers/fonts.ts

@@ -0,0 +1,14 @@
+import { isClientSide } from './ssr';
+
+const fontAvailabilityCache = new Map<string, Promise<boolean>>();
+
+/** Checks whether a font is loaded and available for use, caching the result per font so repeat calls are free. */
+export function isFontAvailable(font: string): Promise<boolean> {
+    if (!fontAvailabilityCache.has(font)) {
+        const promise = isClientSide && document.fonts
+            ? document.fonts.ready.then(() => document.fonts.check(font)).catch(() => false)
+            : Promise.resolve(true);
+        fontAvailabilityCache.set(font, promise);
+    }
+    return fontAvailabilityCache.get(font)!;
+}

uui-core/src/helpers/index.ts

@@ -22,3 +22,4 @@ export * from './orderBy';
 export * from './range';
 export * from './typeHelpers';
 export * from './getDir';
+export * from './fonts';

uui/components/typography/TextPlaceholder.module.scss

@@ -21,6 +21,10 @@
     color: var(--uui-text_placeholder);
     vertical-align: 1px; // to fix vertical over-sizing of line
 
+    &.font-failed {
+        visibility: hidden; // hide fallback-font letterforms (and their shimmer) instead of showing readable text
+    }
+
     &.animated-loading {
         color: transparent;
         background-clip: border-box;

uui/components/typography/TextPlaceholder.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { IHasCX, IHasRawProps } from '@epam/uui-core';
+import { IHasCX, IHasRawProps, isFontAvailable } from '@epam/uui-core';
 import css from './TextPlaceholder.module.scss';
 import { PropsWithChildren } from 'react';
 
@@ -14,7 +14,9 @@ export interface ITextPlaceholderProps extends IHasRawProps<React.HTMLAttributes
 export type TextPlaceholderProps = PropsWithChildren<ITextPlaceholderProps>;
 
 export const TextPlaceholder: React.FunctionComponent<PropsWithChildren<ITextPlaceholderProps>> = (props) => {
-    const pattern = '&nbsp;';
+    const [isFontFailed, setIsFontFailed] = React.useState(false);
+
+    const pattern = 'x';
     const text = React.useMemo(() => {
         const words = [];
         for (let i = 0; i < (props.wordsCount || 1); i++) {
@@ -24,16 +26,21 @@ export const TextPlaceholder: React.FunctionComponent<PropsWithChildren<ITextPla
         return words;
     }, [props.wordsCount]);
 
+    React.useEffect(() => {
+        isFontAvailable('1em Redacted').then((isAvailable) => setIsFontFailed(!isAvailable));
+    }, []);
+
     return (
-        <div aria-busy={ true } className={ cx(css.root, 'uui-text-placeholder') } { ...props.rawProps }>
+        <div aria-busy={ true } aria-hidden="true" className={ cx(css.root, 'uui-text-placeholder') } { ...props.rawProps }>
             {text.map((it: string, index: number) => (
                 <span
                     key={ index }
                     className={ cx([
-                        props.cx, css.loadingWord, !props.isNotAnimated && css.animatedLoading,
+                        props.cx, css.loadingWord, !props.isNotAnimated && css.animatedLoading, isFontFailed && css.fontFailed,
                     ]) }
-                    dangerouslySetInnerHTML={ { __html: it } }
-                />
+                >
+                    {it}
+                </span>
             ))}
         </div>
     );

uui/components/typography/__tests__/__snapshots__/TextPlaceholder.test.tsx.snap

@@ -4,12 +4,13 @@ exports[`TextPlaceholder should be rendered correctly 1`] = `
 <DocumentFragment>
   <div
     aria-busy="true"
+    aria-hidden="true"
     class="root uui-text-placeholder"
   >
     <span
       class="loadingWord animatedLoading"
     >
-                   
+      xxxxxxxxxxxxx
     </span>
   </div>
 </DocumentFragment>
@@ -19,32 +20,33 @@ exports[`TextPlaceholder should be rendered correctly 2`] = `
 <DocumentFragment>
   <div
     aria-busy="true"
+    aria-hidden="true"
     class="root uui-text-placeholder"
   >
     <span
       class="loadingWord"
     >
-                   
+      xxxxxxxxxxxxx
     </span>
     <span
       class="loadingWord"
     >
-                   
+      xxxxxxxxxxxxx
     </span>
     <span
       class="loadingWord"
     >
-                   
+      xxxxxxxxxxxxx
     </span>
     <span
       class="loadingWord"
     >
-                   
+      xxxxxxxxxxxxx
     </span>
     <span
       class="loadingWord"
     >
-                   
+      xxxxxxxxxxxxx
     </span>
   </div>
 </DocumentFragment>