Payment Modal: Animate image loading (#5135)

src/components/payment/Checkout.module.scss

@@ -10,16 +10,14 @@
 }
 
 .checkout-picture {
-  height: 6rem;
-  border-radius: 0.5rem;
+  margin: 0.25rem 0.75rem 0 0;
 
-  @supports (aspect-ratio: 1) {
-    margin: 0.25rem 0.75rem 0 0;
-    min-width: 0;
-    width: 100%;
-    max-width: 8rem;
-    height: auto;
-  }
+  min-width: 0;
+  width: 100%;
+  max-width: 8rem;
+  height: auto;
+
+  border-radius: 0.5rem;
 }
 
 .text {

src/components/payment/Checkout.tsx

@@ -18,6 +18,7 @@ import { formatCurrency } from '../../util/formatCurrency';
 import renderText from '../common/helpers/renderText';
 
 import useMedia from '../../hooks/useMedia';
+import useMediaTransition from '../../hooks/useMediaTransition';
 import useOldLang from '../../hooks/useOldLang';
 
 import SafeLink from '../common/SafeLink';
@@ -90,6 +91,8 @@ const Checkout: FC<OwnProps> = ({
 
   const photoUrl = useMedia(getWebDocumentHash(photo));
 
+  const ref = useMediaTransition<HTMLImageElement>(photoUrl);
+
   const handleTipsClick = useCallback((tips: number) => {
     dispatch!({ type: 'setTipAmount', payload: maxTipAmount ? Math.min(tips, maxTipAmount) : tips });
   }, [dispatch, maxTipAmount]);
@@ -164,7 +167,17 @@ const Checkout: FC<OwnProps> = ({
   return (
     <div className={styles.root}>
       <div className={styles.description}>
-        {photoUrl && <img className={styles.checkoutPicture} src={photoUrl} draggable={false} alt="" />}
+        {photoUrl && (
+          <img
+            ref={ref}
+            className={styles.checkoutPicture}
+            src={photoUrl}
+            draggable={false}
+            width={photo!.dimensions?.width}
+            height={photo!.dimensions?.height}
+            alt=""
+          />
+        )}
         {!photoUrl && photo && (
           <Skeleton
             width={photo.dimensions?.width}