fix(web): resolve encryption glitch in footer text

[Aleesssino]

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

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

---

PR Type

Bug fix

---

Description

• Added state management to store the element's width before the encryption animation begins to ensure layout stability.
• Changed the root element from motion.button to motion.div to better handle the width styling.
• Introduced a span with a ref to measure the text width and applied this width to the motion.div.

---

Changes walkthrough 📝

	Relevant files
Bug fix	encrypt-text.tsx Fix encryption animation glitch by managing element width apps/web/src/components/ui/encrypt-text.tsx Added useEffect to store the element's width before the encryption animation begins. Changed the root element from motion.button to motion.div. Added a span with ref to measure the text width. Applied the measured width to the motion.div to maintain layout stability. +19/-8

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	2
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	None

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Category	Suggestion	Score
Accessibility	Replace with for interactive elements to improve accessibility To ensure accessibility and semantic correctness, replace the element with a element for interactive elements, especially since they have event handlers like onMouseEnter and onMouseLeave. apps/web/src/components/ui/encrypt-text.tsx [58-62] -<motion.div +<motion.button className="group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white" onMouseEnter={scramble} onMouseLeave={stopScramble} style={{ width: width ? `${width}px` : 'auto' }} > Suggestion importance[1-10]: 10 Why: Replacing the <div> with a <button> significantly improves accessibility and semantic correctness, which is crucial for web applications. This change ensures that the interactive element is correctly recognized by assistive technologies.	10
Best practice	Add a cleanup function in useEffect to reset the width state on component unmount Consider using a cleanup function in the useEffect hook to clear the width state when the component unmounts. This can help prevent potential memory leaks or unexpected behavior when the component is no longer in the DOM but the state updates are triggered. apps/web/src/components/ui/encrypt-text.tsx [20-24] useEffect(() => { if (textRef.current) { setWidth(textRef.current.offsetWidth) } + return () => { + setWidth(null); + }; }, [TARGET_TEXT]) Suggestion importance[1-10]: 9 Why: Adding a cleanup function in the useEffect hook is a best practice to prevent potential memory leaks and ensure that the state is reset when the component unmounts. This is a significant improvement for the stability and reliability of the component.	9
Performance	Use useMemo for calculating width to optimize performance It is recommended to use useMemo for calculating the width based on textRef.current.offsetWidth to optimize performance by avoiding unnecessary recalculations during re-renders that do not affect the textRef.current. apps/web/src/components/ui/encrypt-text.tsx [20-24] -useEffect(() => { - if (textRef.current) { - setWidth(textRef.current.offsetWidth) - } -}, [TARGET_TEXT]) +const width = useMemo(() => { + return textRef.current ? textRef.current.offsetWidth : null; +}, [textRef.current]); Suggestion importance[1-10]: 7 Why: Using useMemo can optimize performance by preventing unnecessary recalculations. However, the current implementation with useEffect is also valid and the performance gain might be marginal in this specific context.	7
Maintainability	Use CSS classes instead of inline styles for dynamic width adjustments Avoid using inline styles for setting the width dynamically. Instead, consider using CSS classes and modifying these classes based on the state to make the styles more maintainable and potentially enhance performance by reducing style recalculations. apps/web/src/components/ui/encrypt-text.tsx [62] -style={{ width: width ? `${width}px` : 'auto' }} +className={`group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white ${width ? 'custom-width' : ''}`} Suggestion importance[1-10]: 6 Why: While using CSS classes instead of inline styles can improve maintainability and performance, the current use of inline styles is not a critical issue. The suggestion is valid but addresses a minor improvement.	6

[kriptonian1]

@Aleesssino after solving the mentioned review, we can merge it 👍

[kriptonian1]

Just add the role, and then it will be good to merge

[sonarcloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
1.5% Duplication on New Code

See analysis details on SonarCloud

[kriptonian1]

@rajdip-b LGTM, you can merge 🚀

[kriptonian1]

@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

[rajdip-b]

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 develop with the staging environment. Hope that clears things out!

[kriptonian1]

Can we merge this pr to prod