Animate stake pool list reordering

input-output-hk · Jul 1, 2020 · ed4ea23 · ed4ea23
1 parent eda6126
commit ed4ea23
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -213,6 +213,7 @@
     "react-custom-scrollbars": "4.2.1",
     "react-datetime": "2.16.3",
     "react-dom": "16.13.1",
+    "react-flip-move": "3.0.4",
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "4.3.1",

diff --git a/source/renderer/app/api/api.js b/source/renderer/app/api/api.js
@@ -1536,6 +1536,7 @@ export default class AdaApi {
         stakePoolsWithMetadata: stakePools.length,
         unfilteredStakePools: response,
       });
+      console.log(`Stake pools loaded, stek: ${stake}`);
       return stakePools;
     } catch (error) {
       logger.error('AdaApi::getStakePools error', { error });

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import styles from './StakePoolsList.scss';
 import StakePool from '../../../domains/StakePool';
 import { StakePoolThumbnail } from './StakePoolThumbnail';
+import FlipMove from 'react-flip-move';
 
 type Props = {
   stakePoolsList: Array<StakePool>,
@@ -109,30 +110,33 @@ export class StakePoolsList extends Component<Props, State> {
 
     return (
       <div className={componentClasses}>
-        {stakePoolsList.map(stakePool => {
-          const isHighlighted = this.getIsHighlighted(stakePool.id);
-          const isSelected = selectedPoolId && stakePool.id === selectedPoolId;
-
-          return (
-            <StakePoolThumbnail
-              stakePool={stakePool}
-              key={stakePool.id + stakePool.ranking}
-              onOpenExternalLink={onOpenExternalLink}
-              isHighlighted={isHighlighted}
-              onClose={this.handleClose}
-              onClick={!highlightOnHover && this.handleOpenThumbnail}
-              onHover={highlightOnHover && this.handleOpenThumbnail}
-              onSelect={this.handleSelect}
-              showWithSelectButton={showWithSelectButton}
-              currentTheme={currentTheme}
-              isSelected={isSelected}
-              showSelected={showSelected}
-              containerClassName={containerClassName}
-              numberOfStakePools={numberOfStakePools}
-              disabledStakePoolId={disabledStakePoolId}
-            />
-          );
-        })}
+        <FlipMove>
+          {stakePoolsList.map(stakePool => {
+            const isHighlighted = this.getIsHighlighted(stakePool.id);
+            const isSelected =
+              selectedPoolId && stakePool.id === selectedPoolId;
+
+            return (
+              <StakePoolThumbnail
+                stakePool={stakePool}
+                key={stakePool.id + stakePool.ranking}
+                onOpenExternalLink={onOpenExternalLink}
+                isHighlighted={isHighlighted}
+                onClose={this.handleClose}
+                onClick={!highlightOnHover && this.handleOpenThumbnail}
+                onHover={highlightOnHover && this.handleOpenThumbnail}
+                onSelect={this.handleSelect}
+                showWithSelectButton={showWithSelectButton}
+                currentTheme={currentTheme}
+                isSelected={isSelected}
+                showSelected={showSelected}
+                containerClassName={containerClassName}
+                numberOfStakePools={numberOfStakePools}
+                disabledStakePoolId={disabledStakePoolId}
+              />
+            );
+          })}
+        </FlipMove>
       </div>
     );
   }

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsList.scss
@@ -1,4 +1,4 @@
-.component {
+.component > div {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fill, 80px);

diff --git a/yarn.lock b/yarn.lock
@@ -11494,6 +11494,11 @@ react-fast-compare@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.0.1.tgz#884d339ce1341aad22392e7a88664c71da48600e"
 
+react-flip-move@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-flip-move/-/react-flip-move-3.0.4.tgz#261f66101fbc305f9b7b28959c5cf8236413ca74"
+  integrity sha512-HyUVv9g3t/BS7Yz9HgrtYSWyRNdR2F81nkj+C5iRY675AwlqCLB5JU9mnZWg0cdVz7IM4iquoyZx70vzZv3Z8Q==
+
 react-focus-lock@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.3.1.tgz#9d5d85899773609c7eefa4fc54fff6a0f5f2fc47"