fix: show spinner when needed in squareappIcon

Previously it was rendered too liberally. Now it is rendered only when - Component is in "loading" variant - Component has an animationState (success or failed), which triggers after a loading finishes. We need this because we don't want to hide the spinner as soon as the loading is over We want to wait for the ending animation too so the transition looks smooth. Also refactored the spinner logic out of the main component for clarity
cozy · May 12, 2023 · 0e92a42 · 0e92a42
1 parent 42dcfd5
commit 0e92a42
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 113 deletions.
diff --git a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
@@ -11,28 +11,6 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
     <span
       class="MuiBadge-root-40"
     >
-      <div
-        class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1 u-m-0"
-      >
-        <svg
-          aria-busy="true"
-          class="styles__icon___23x3R styles__icon--spin___ybfC1"
-          height="16"
-          role="progressbar"
-          style="fill: var(--spinnerColor);"
-          viewBox="0 0 32 32"
-          width="16"
-        >
-          <path
-            d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
-            opacity="0.25"
-          />
-          <path
-            d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
-          />
-        </svg>
-        
-      </div>
       <span
         class="MuiBadge-root-40 styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-36"
       >
@@ -82,28 +60,6 @@ exports[`SquareAppIcon component should render an app correctly with the given n
     <span
       class="MuiBadge-root-9"
     >
-      <div
-        class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1 u-m-0"
-      >
-        <svg
-          aria-busy="true"
-          class="styles__icon___23x3R styles__icon--spin___ybfC1"
-          height="16"
-          role="progressbar"
-          style="fill: var(--spinnerColor);"
-          viewBox="0 0 32 32"
-          width="16"
-        >
-          <path
-            d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
-            opacity="0.25"
-          />
-          <path
-            d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
-          />
-        </svg>
-        
-      </div>
       <span
         class="MuiBadge-root-9 styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-5"
       >
@@ -153,28 +109,6 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
     <span
       class="MuiBadge-root-71"
     >
-      <div
-        class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1 u-m-0"
-      >
-        <svg
-          aria-busy="true"
-          class="styles__icon___23x3R styles__icon--spin___ybfC1"
-          height="16"
-          role="progressbar"
-          style="fill: var(--spinnerColor);"
-          viewBox="0 0 32 32"
-          width="16"
-        >
-          <path
-            d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
-            opacity="0.25"
-          />
-          <path
-            d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
-          />
-        </svg>
-        
-      </div>
       <span
         class="MuiBadge-root-71 styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-67"
       >
@@ -278,28 +212,6 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
     <span
       class="MuiBadge-root-164"
     >
-      <div
-        class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1 u-m-0"
-      >
-        <svg
-          aria-busy="true"
-          class="styles__icon___23x3R styles__icon--spin___ybfC1"
-          height="16"
-          role="progressbar"
-          style="fill: var(--spinnerColor);"
-          viewBox="0 0 32 32"
-          width="16"
-        >
-          <path
-            d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
-            opacity="0.25"
-          />
-          <path
-            d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
-          />
-        </svg>
-        
-      </div>
       <span
         class="MuiBadge-root-164 styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-160"
       >
@@ -508,28 +420,6 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
     <span
       class="MuiBadge-root-318"
     >
-      <div
-        class="styles__c-spinner___1snK7 styles__SquareAppIcon-spinner___o0LO1 u-m-0"
-      >
-        <svg
-          aria-busy="true"
-          class="styles__icon___23x3R styles__icon--spin___ybfC1"
-          height="16"
-          role="progressbar"
-          style="fill: var(--spinnerColor);"
-          viewBox="0 0 32 32"
-          width="16"
-        >
-          <path
-            d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
-            opacity="0.25"
-          />
-          <path
-            d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
-          />
-        </svg>
-        
-      </div>
       <span
         class="MuiBadge-root-318 styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-314"
       >

diff --git a/react/SquareAppIcon/index.jsx b/react/SquareAppIcon/index.jsx
@@ -76,6 +76,18 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
+const shouldRenderSpinner = (variant, animationState) => {
+  return ['loading'].includes(variant) || animationState
+}
+
+const SquareAppIconSpinner = ({ variant, animationState }) => {
+  if (!shouldRenderSpinner(variant, animationState)) {
+    return null
+  }
+
+  return <Spinner className={cx(styles['SquareAppIcon-spinner'], 'u-m-0')} />
+}
+
 export const SquareAppIcon = ({
   name,
   variant,
@@ -117,9 +129,10 @@ export const SquareAppIcon = ({
           overlap="rectangular"
           invisible={variant !== 'shortcut'}
         >
-          {['default', 'loading', 'error'].includes(variant) && (
-            <Spinner className={cx(styles['SquareAppIcon-spinner'], 'u-m-0')} />
-          )}
+          <SquareAppIconSpinner
+            variant={variant}
+            animationState={animationState}
+          />
           <Badge
             className={cx(
               styles['SquareAppIcon-wrapper'],