Profile Rating Modal: Fix animation (#6582)

src/components/common/PremiumProgress.module.scss

@@ -29,8 +29,8 @@ $progress-color: #7e85ff;
   display: flex;
   justify-content: center;
 
-  transition: transform 0.2s ease-in-out;
+  transition: transform 0.2s ease;
-  animation: slide-in 0.5s ease-in-out;
+  animation: slide-in 0.5s ease;
 }
 
 @keyframes slide-in {
@@ -85,7 +85,7 @@ $progress-color: #7e85ff;
 
   background-color: $progress-color;
 
-  transition: width 0.25s ease-in-out;
+  transition: width 0.25s ease;
 
   &.noTransition {
     transition: none;
@@ -306,7 +306,7 @@ $progress-color: #7e85ff;
 
   .positiveProgress,
   .negativeProgress {
-    transition: opacity 0.15s, width var(--cycling-animation-progress), background-size 0.3s;
+    transition: opacity 0.15s ease, width var(--cycling-animation-progress) ease, background-size 0.3s ease;
   }
 }
 

src/components/modals/profileRating/ProfileRatingModal.tsx

@@ -8,7 +8,9 @@ import { getPeerTitle } from '../../../global/helpers/peers';
 import { selectUser, selectUserFullInfo } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 import { formatShortDuration } from '../../../util/dates/dateFormat';
+import { getServerTime } from '../../../util/serverTime';
 
+import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
@@ -44,6 +46,10 @@ const ProfileRatingModal = ({
   } = getActions();
   const lang = useLang();
   const isOpen = Boolean(modal);
+  const renderingUser = useCurrentOrPrev(user);
+  const renderingStarsRating = useCurrentOrPrev(starsRating);
+  const renderingPendingRating = useCurrentOrPrev(pendingRating);
+  const renderingPendingRatingDate = useCurrentOrPrev(pendingRatingDate);
   const [showFutureRating, setShowFutureRating] = useState(false);
 
   const handleClose = useLastCallback(() => {
@@ -77,16 +83,18 @@ const ProfileRatingModal = ({
   };
 
   const header = useMemo(() => {
-    if (!modal || !user || !starsRating || !isOpen) return undefined;
+    if (!renderingUser || !renderingStarsRating) return undefined;
 
-    const rating = showFutureRating && pendingRating ? pendingRating : starsRating;
+    const rating = showFutureRating && renderingPendingRating
+      ? renderingPendingRating : renderingStarsRating;
     const currentStars = rating.stars;
     const currentLevelStars = rating.currentLevelStars;
     const nextLevelStars = rating.nextLevelStars;
     const currentLevel = rating.level;
     const nextLevel = currentLevel + 1;
     const isNegative = currentLevel < 0;
-    const pendingLevel = !showFutureRating && pendingRating ? pendingRating.level : starsRating.level;
+    const pendingLevel = !showFutureRating && renderingPendingRating
+      ? renderingPendingRating.level : renderingStarsRating.level;
 
     let levelProgress = 0;
 
@@ -100,9 +108,9 @@ const ProfileRatingModal = ({
 
     const progress = isNegative ? 0.5 : Math.max(0, Math.min(1, levelProgress));
 
-    const waitTime = pendingRatingDate ? pendingRatingDate - Math.floor(Date.now() / 1000) : 0;
+    const waitTime = renderingPendingRatingDate ? renderingPendingRatingDate - getServerTime() : 0;
-    const pendingPoints = pendingRating ? pendingRating.stars - starsRating.stars : 0;
+    const pendingPoints = renderingPendingRating ? renderingPendingRating.stars - renderingStarsRating.stars : 0;
-    const shouldShowPreview = pendingRating && pendingRatingDate;
+    const shouldShowPreview = renderingPendingRating && renderingPendingRatingDate;
 
     const renderPreviewDescription = () => {
       if (!shouldShowPreview) return undefined;
@@ -180,16 +188,16 @@ const ProfileRatingModal = ({
           {lang('TitleRating')}
         </div>
         <p className={styles.description}>
-          {user?.id === currentUserId
+          {renderingUser?.id === currentUserId
             ? lang('RatingYourReflectsActivity')
-            : lang('RatingReflectsActivity', { name: getPeerTitle(lang, user) || userFallbackText },
+            : lang('RatingReflectsActivity', { name: getPeerTitle(lang, renderingUser) || userFallbackText },
               { withMarkdown: true, withNodes: true })}
         </p>
       </div>
     );
-  }, [modal, user, currentUserId, starsRating,
+  }, [renderingUser, currentUserId, renderingStarsRating,
-    pendingRating, pendingRatingDate, showFutureRating,
+    renderingPendingRating, renderingPendingRatingDate, showFutureRating,
-    lang, handleShowFuture, handleShowCurrent, isOpen]);
+    lang, handleShowFuture, handleShowCurrent]);
 
   const listItemData = [
     ['closed-gift', lang('RatingGiftsFromTelegram'), (
@@ -213,7 +221,6 @@ const ProfileRatingModal = ({
   ] satisfies TableAboutData;
 
   const footer = useMemo(() => {
-    if (!isOpen) return undefined;
     return (
       <div className={styles.footer}>
         <Button
@@ -225,7 +232,7 @@ const ProfileRatingModal = ({
         </Button>
       </div>
     );
-  }, [lang, isOpen, handleClose]);
+  }, [lang, handleClose]);
 
   return (
     <TableAboutModal