Removing inline styles from LoadingText (#9697)

.stylelintrc

@@ -14,6 +14,7 @@
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": [
         "content",
+        "each",
         "else",
         "for",
         "function",

src/amo/components/AddonTitle/index.js

@@ -98,7 +98,7 @@ export const AddonTitleBase = ({
           )}
         </>
       ) : (
-        <LoadingText width={70} />
+        <LoadingText width={80} />
       )}
     </Component>
   );

src/amo/components/Categories/index.js

@@ -146,7 +146,6 @@ export class CategoriesBase extends React.Component<InternalProps> {
                   <LoadingText
                     className="Categories-loading-text"
                     key={`Categories-loading-text-${index}`}
-                    range={3}
                   />
                 );
               })}

src/amo/components/RatingsByStar/index.js

@@ -131,7 +131,7 @@ export class RatingsByStarBase extends React.Component<InternalProps> {
               }
 
               starCountNode = loading ? (
-                <LoadingText minWidth={95} />
+                <LoadingText width={100} />
               ) : (
                 createLink(i18n.formatNumber(starCount || 0))
               );
@@ -141,7 +141,7 @@ export class RatingsByStarBase extends React.Component<InternalProps> {
               <React.Fragment key={star}>
                 <div className="RatingsByStar-star">
                   {loading ? (
-                    <LoadingText minWidth={95} />
+                    <LoadingText width={100} />
                   ) : (
                     createLink(i18n.formatNumber(star))
                   )}

src/amo/components/SearchResult/index.js

@@ -239,7 +239,7 @@ export class SearchResultBase extends React.Component<InternalProps> {
                   { total: i18n.formatNumber(averageDailyUsers) },
                 )
               ) : (
-                <LoadingText width={90} />
+                <LoadingText width={80} />
               )}
             </span>
           </h3>

src/amo/components/SearchSuggestion/index.js

@@ -46,7 +46,7 @@ export const SearchSuggestionBase = ({
     >
       <img alt={name} className="SearchSuggestion-icon" src={iconUrl} />
       <span className="SearchSuggestion-name">
-        {loading ? <LoadingText minWidth={20} range={12} /> : name}
+        {loading ? <LoadingText minWidth={20} /> : name}
       </span>
       {promotedCategory ? (
         <IconPromotedBadge

src/amo/components/SecondaryHero/index.js

@@ -96,7 +96,7 @@ export const SecondaryHeroBase = ({
         )}
         {!module.description && (
           <div className="SecondaryHero-module-link">
-            <LoadingText width={50} />
+            <LoadingText width={60} />
           </div>
         )}
       </div>,
@@ -109,9 +109,9 @@ export const SecondaryHeroBase = ({
         <h2 className="SecondaryHero-message-headline">
           {headline || (
             <>
-              <LoadingText width={70} />
+              <LoadingText width={80} />
               <br />
-              <LoadingText width={50} />
+              <LoadingText width={60} />
             </>
           )}
         </h2>
@@ -131,7 +131,7 @@ export const SecondaryHeroBase = ({
         )}
         {!headline && (
           <div className="SecondaryHero-message-link">
-            <LoadingText width={50} />
+            <LoadingText width={60} />
           </div>
         )}
       </div>

src/amo/pages/AddonReviewList/index.js

@@ -292,7 +292,7 @@ export class AddonReviewListBase extends React.Component<InternalProps> {
           },
         );
     } else {
-      reviewCountText = <LoadingText />;
+      reviewCountText = <LoadingText width={40} />;
     }
 
     const reviewCountHTML = (

src/amo/pages/UsersUnsubscribe/index.js

@@ -141,7 +141,7 @@ export class UsersUnsubscribeBase extends React.Component<InternalProps> {
                 {isUnsubscribed ? (
                   getNotificationDescription(i18n, notificationName)
                 ) : (
-                  <LoadingText range={30} />
+                  <LoadingText minWidth={40} />
                 )}
               </blockquote>
 

src/ui/components/LoadingText/index.js

@@ -8,27 +8,27 @@ type Props = {|
   className?: string,
   width?: number,
   minWidth: number,
-  range: number,
 |};
 
+const possibleWidths = [20, 40, 60, 80, 100];
+
 export default class LoadingText extends React.Component<Props> {
-  static defaultProps = {
-    minWidth: 20,
-    range: 60,
-  };
+  static defaultProps = { minWidth: 20 };
 
   render() {
-    const { className, minWidth, range, width } = this.props;
+    const { className, minWidth, width } = this.props;
 
     // We start each animation with a slightly different delay so content
     // doesn't appear to be pulsing all at once.
     const delayStart = Math.floor(Math.random() * 3) + 1;
 
     let finalWidth = width;
-    if (typeof finalWidth === 'undefined') {
-      // Allow a minimum width so placeholders appear approximately
-      // the same size as content.
-      finalWidth = Math.floor(Math.random() * range) + minWidth;
+    if (
+      typeof finalWidth === 'undefined' ||
+      !possibleWidths.includes(finalWidth)
+    ) {
+      const widths = possibleWidths.filter((w) => w >= minWidth);
+      finalWidth = widths[Math.floor(Math.random() * widths.length)];
     }
 
     return (
@@ -36,11 +36,9 @@ export default class LoadingText extends React.Component<Props> {
         className={makeClassName(
           'LoadingText',
           `LoadingText--delay-${delayStart}`,
+          `LoadingText--width-${finalWidth}`,
           className,
         )}
-        style={{
-          width: `${finalWidth}%`,
-        }}
       />
     );
   }

src/ui/components/LoadingText/styles.scss

@@ -45,3 +45,17 @@
     }
   }
 }
+
+$widths: (
+  20: 20%,
+  40: 40%,
+  60: 60%,
+  80: 80%,
+  100: 100%,
+);
+
+@each $className, $width in $widths {
+  .LoadingText--width-#{$className} {
+    width: $width;
+  }
+}

tests/unit/amo/pages/TestAddon.js

@@ -338,7 +338,7 @@ describe(__filename, () => {
 
     // These should show LoadingText
     expect(root.find('.AddonDescription').prop('header')).toEqual(
-      <LoadingText minWidth={20} range={60} width={40} />,
+      <LoadingText width={40} />,
     );
     expect(
       root.find('.AddonDescription-contents').find(LoadingText),

tests/unit/ui/components/TestLoadingText.js

@@ -12,8 +12,8 @@ describe(__filename, () => {
   });
 
   it('lets you set a fixed width', () => {
-    const root = render({ width: 55 });
-    expect(root.prop('style')).toMatchObject({ width: '55%' });
+    const root = render({ width: 40 });
+    expect(root).toHaveClassName('LoadingText--width-40');
   });
 
   it('lets you set a custom class name', () => {