Animate validators as they render (#790)

apps/minifront/package.json

@@ -12,11 +12,11 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@penumbra-zone/bech32": "workspace:*",
     "@penumbra-zone/client": "workspace:*",
     "@penumbra-zone/constants": "workspace:*",
     "@penumbra-zone/crypto-web": "workspace:*",
     "@penumbra-zone/getters": "workspace:*",
-    "@penumbra-zone/bech32": "workspace:*",
     "@penumbra-zone/perspective": "workspace:*",
     "@penumbra-zone/transport-dom": "workspace:*",
     "@penumbra-zone/types": "workspace:*",
@@ -25,6 +25,7 @@
     "@tanstack/react-query": "^5.26.3",
     "bignumber.js": "^9.1.2",
     "date-fns": "^3.4.0",
+    "framer-motion": "^11.0.14",
     "immer": "^10.0.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

apps/minifront/src/components/staking/account/delegations.tsx

@@ -1,3 +1,4 @@
+import { AnimatePresence, motion } from 'framer-motion';
 import { AllSlices } from '../../../state';
 import { DelegationValueView } from './delegation-value-view';
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
@@ -23,17 +24,24 @@ export const Delegations = () => {
 
   return (
     <div className='mt-8 flex flex-col gap-8'>
-      {delegations.map(delegation => (
-        <DelegationValueView
-          key={bech32IdentityKey(getIdentityKeyFromValueView(delegation))}
-          valueView={delegation}
-          unstakedTokens={unstakedTokens}
-          votingPowerAsIntegerPercentage={getVotingPowerAsIntegerPercentage(
-            votingPowerByValidatorInfo,
-            delegation,
-          )}
-        />
-      ))}
+      <AnimatePresence>
+        {delegations.map(delegation => (
+          <motion.div
+            key={bech32IdentityKey(getIdentityKeyFromValueView(delegation))}
+            layout
+            className='bg-charcoal'
+          >
+            <DelegationValueView
+              valueView={delegation}
+              unstakedTokens={unstakedTokens}
+              votingPowerAsIntegerPercentage={getVotingPowerAsIntegerPercentage(
+                votingPowerByValidatorInfo,
+                delegation,
+              )}
+            />
+          </motion.div>
+        ))}
+      </AnimatePresence>
     </div>
   );
 };