Add bounce animations to vote buttons and swipe actions (#502)

package.json

@@ -64,13 +64,13 @@
     "lemmy-js-client": "0.18.0",
     "lodash": "^4.17.21",
     "mdast-util-gfm-autolink-literal-lemmy": "^1.0.3",
-    "photoswipe": "^5.3.8",
     "mdast-util-gfm-strikethrough": "^1.0.3",
     "mdast-util-gfm-table": "^1.0.7",
     "micromark": "^3.0.0",
     "micromark-extension-gfm-strikethrough": "^1.0.0",
     "micromark-extension-gfm-table": "^1.0.0",
     "micromark-util-combine-extensions": "^1.0.0",
+    "photoswipe": "^5.3.8",
     "prettier": "^2.8.8",
     "pwa-asset-generator": "^6.3.1",
     "react": "^18.2.0",
@@ -81,6 +81,7 @@
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
     "react-textarea-autosize": "^8.5.2",
+    "react-transition-state": "^2.1.1",
     "react-virtuoso": "^4.3.11",
     "remark-gfm": "^3.0.1",
     "terser": "^5.18.1",

src/features/post/shared/VoteButton.tsx

@@ -1,20 +1,24 @@
 import styled from "@emotion/styled";
 import { IonIcon, useIonToast } from "@ionic/react";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { voteOnPost } from "../postSlice";
 import { css } from "@emotion/react";
 import { arrowDownSharp, arrowUpSharp } from "ionicons/icons";
 import { ActionButton } from "../actions/ActionButton";
 import { voteError } from "../../../helpers/toastMessages";
 import { PageContext } from "../../auth/PageContext";
+import { bounceAnimationOnTransition, bounceMs } from "../../shared/animations";
+import { useTransition } from "react-transition-state";
 
 export const Item = styled(ActionButton, {
   shouldForwardProp: (prop) => prop !== "on" && prop !== "activeColor",
 })<{
   on?: boolean;
   activeColor?: string;
 }>`
+  ${bounceAnimationOnTransition}
+
   ${({ on, activeColor }) =>
     on
       ? css`
@@ -37,6 +41,10 @@ export function VoteButton({ type, postId }: VoteButtonProps) {
   const postVotesById = useAppSelector((state) => state.post.postVotesById);
   const myVote = postVotesById[postId];
 
+  const [state, toggle] = useTransition({
+    timeout: bounceMs,
+  });
+
   const icon = (() => {
     switch (type) {
       case "down":
@@ -64,14 +72,25 @@ export function VoteButton({ type, postId }: VoteButtonProps) {
     }
   })();
 
+  const on = myVote === selectedVote;
+
+  useEffect(() => {
+    if (!on) toggle(false);
+  }, [on, toggle]);
+
   return (
     <Item
-      on={myVote === selectedVote}
+      on={on}
+      className={state.status}
       onClick={async (e) => {
         e.stopPropagation();
 
         if (presentLoginIfNeeded()) return;
 
+        if (!on) {
+          toggle(true);
+        }
+
         try {
           await dispatch(
             voteOnPost(postId, myVote === selectedVote ? 0 : selectedVote)

src/features/shared/animations.ts

@@ -0,0 +1,25 @@
+import { css, keyframes } from "@emotion/react";
+
+const bounce = keyframes`
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+
+export const bounceMs = 175;
+
+export const bounceAnimation = css`
+  animation: ${bounce} ${bounceMs}ms linear;
+`;
+
+export const bounceAnimationOnTransition = css`
+  &.entering {
+    ${bounceAnimation}
+  }
+`;

src/features/shared/sliding/SlidingItem.tsx

@@ -8,6 +8,7 @@ import {
   IonItemSliding,
 } from "@ionic/react";
 import React, { useMemo, useRef, useState } from "react";
+import { bounceAnimation } from "../animations";
 
 const StyledIonItemSliding = styled(IonItemSliding)`
   --ion-item-border-color: transparent;
@@ -39,6 +40,8 @@ const OptionContainer = styled.div<{ active: boolean }>`
     active &&
     css`
       opacity: 1;
+
+      ${bounceAnimation}
     `}
 `;