Merge pull request #185 from lidofinance/fix/connect-button-loading-a…

…nimation Fix: ConnectButtonLoaderStyle animation state
lidofinance · Oct 21, 2024 · 522d157 · 522d157
2 parents 49fc80c + 85b16d5
commit 522d157
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/packages/connect-wallet-modal/CHANGELOG.md b/packages/connect-wallet-modal/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reef-knot/connect-wallet-modal
 
+## 5.5.1
+
+### Patch Changes
+
+- Fix the issue with paused loading animation for ConnectButtonLoader
+
 ## 5.5.0
 
 ### Minor Changes

diff --git a/packages/connect-wallet-modal/package.json b/packages/connect-wallet-modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/connect-wallet-modal",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

diff --git a/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx b/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx
@@ -38,11 +38,9 @@ export const ConnectButtonLoaderStyle = styled.div<{ $isLoading: boolean }>`
 
   width: 100%;
   height: 100%;
-  animation-name: ${translation};
+  animation-name: ${({ $isLoading }) => ($isLoading ? translation : 'none')};
   animation-duration: 1s;
   animation-iteration-count: infinite;
-  animation-play-state: ${({ $isLoading }) =>
-    $isLoading ? 'running' : 'paused'};
   background-size: 300% 100%;
   background-position: 100% 0;
   background-image: linear-gradient(

diff --git a/packages/reef-knot/CHANGELOG.md b/packages/reef-knot/CHANGELOG.md
@@ -1,5 +1,13 @@
 # reef-knot
 
+## 5.7.3
+
+### Patch Changes
+
+- Fix the issue with paused loading animation for ConnectButtonLoader
+- Updated dependencies
+  - @reef-knot/connect-wallet-modal@5.5.1
+
 ## 5.7.2
 
 ### Patch Changes

diff --git a/packages/reef-knot/package.json b/packages/reef-knot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reef-knot",
-  "version": "5.7.2",
+  "version": "5.7.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -41,7 +41,7 @@
     "lint": "eslint --ext ts,tsx,js,mjs ."
   },
   "dependencies": {
-    "@reef-knot/connect-wallet-modal": "5.5.0",
+    "@reef-knot/connect-wallet-modal": "5.5.1",
     "@reef-knot/core-react": "4.3.0",
     "@reef-knot/web3-react": "4.0.1",
     "@reef-knot/ui-react": "2.1.4",