-
-
Notifications
You must be signed in to change notification settings - Fork 105
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(web): resolve encryption glitch in footer text #267
fix(web): resolve encryption glitch in footer text #267
Conversation
PR Reviewer Guide 🔍
|
PR Code Suggestions ✨
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Aleesssino after solving the mentioned review, we can merge it 👍
3e3aee5
to
ad2913a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just add the role, and then it will be good to merge
Quality Gate passedIssues Measures |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rajdip-b LGTM, you can merge 🚀
@rajdip-b it doesn't seem like it's working after merged, can you confirm if it's an issue from the deployment end or not |
For now, we don't have any staging environment. So, the pipeline is set to work only when code is pushed to main (when a release is made). That's why, it didn't work. Later on when we will completely deploy the alpha environment, we will set up |
Can we merge this pr to prod |
## [2.1.0](v2.0.0...v2.1.0) (2024-06-27) ### 🚀 Features * **api:** Add `requireRestart` parameter ([#286](#286)) ([fb447a1](fb447a1)) * **cli:** Added CLI ([#289](#289)) ([1143d95](1143d95)) * **workflows:** Tag user on attempt's reply body ([9d01698](9d01698)) ### 🐛 Bug Fixes * **web:** Resolve encryption glitch in footer text ([#267](#267)) ([2b5cb39](2b5cb39)) ### 📚 Documentation * added running-the-web-app.md ([#269](#269)) ([755ea12](755ea12))
## [2.1.0](v2.0.0...v2.1.0) (2024-06-27) ### 🚀 Features * **api:** Add `requireRestart` parameter ([#286](#286)) ([fb447a1](fb447a1)) * **cli:** Added CLI ([#289](#289)) ([1143d95](1143d95)) * **workflows:** Tag user on attempt's reply body ([9d01698](9d01698)) ### 🐛 Bug Fixes * **web:** Resolve encryption glitch in footer text ([#267](#267)) ([2b5cb39](2b5cb39)) ### 📚 Documentation * added running-the-web-app.md ([#269](#269)) ([755ea12](755ea12))
## [2.1.0](keyshade-xyz/keyshade@v2.0.0...v2.1.0) (2024-06-27) ### 🚀 Features * **api:** Add `requireRestart` parameter ([keyshade-xyz#286](keyshade-xyz#286)) ([fb447a1](keyshade-xyz@fb447a1)) * **cli:** Added CLI ([keyshade-xyz#289](keyshade-xyz#289)) ([1143d95](keyshade-xyz@1143d95)) * **workflows:** Tag user on attempt's reply body ([9d01698](keyshade-xyz@9d01698)) ### 🐛 Bug Fixes * **web:** Resolve encryption glitch in footer text ([keyshade-xyz#267](keyshade-xyz#267)) ([2b5cb39](keyshade-xyz@2b5cb39)) ### 📚 Documentation * added running-the-web-app.md ([keyshade-xyz#269](keyshade-xyz#269)) ([755ea12](keyshade-xyz@755ea12))
User description
Description
I added state management to store the element's width before the encryption animation begins. This ensures that when the encryption starts, the layout remains stable and doesn't break.
Fixes #249
Future Improvements
If others find that this fix doesn't work as expected or if the behavior isn't ideal, I will improve my solution accordingly.
Mentions
@kriptonian1 I am waiting for your feedback.
Screenshots of relevant screens
2024-06-10.19-34-32.online-video-cutter.com.mp4
Developer's checklist
If changes are made in the code:
PR Type
Bug fix
Description
motion.button
tomotion.div
to better handle the width styling.span
with aref
to measure the text width and applied this width to themotion.div
.Changes walkthrough 📝
encrypt-text.tsx
Fix encryption animation glitch by managing element width
apps/web/src/components/ui/encrypt-text.tsx
useEffect
to store the element's width before the encryptionanimation begins.
motion.button
tomotion.div
.span
withref
to measure the text width.motion.div
to maintain layoutstability.