From 0e92a42b347e56935391917a1819b7bc783ebc09 Mon Sep 17 00:00:00 2001
From: Antonin Cezard <acezard@gmail.com>
Date: Thu, 11 May 2023 15:59:54 +0200
Subject: [PATCH] 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
---
 .../__snapshots__/SquareAppIcon.spec.js.snap  | 110 ------------------
 react/SquareAppIcon/index.jsx                 |  19 ++-
 2 files changed, 16 insertions(+), 113 deletions(-)

diff --git a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
index 2c47ed04d7..0abcaff00b 100644
--- 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
index ae756978d3..006898b718 100644
--- 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'],