ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Payment Modal: Animate image loading (#5135)

Browse Source
This commit is contained in:
zubiden 2024-11-27 20:33:11 +04:00 committed by Alexander Zinchuk
parent 957dec9ae7
commit 834df87279
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/payment/Checkout.module.scss
View File

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

15
src/components/payment/Checkout.tsx
View File

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