Remove the scrollbar from the subscriber section #823
Conversation
WalkthroughThe introduced changes enhance the responsiveness of the Changes
TipsChat with CodeRabbit Bot (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Woah! This is your first Pull Request in our community, Congratulations 🎉 and thank you for your contribution! 🚀 The team will review it on availability 💫. In the meantime join our Discord server and checkout our YouTube channel.
|
Hey @Roshan-Horo @anongorax @apoorv-on-git @itshypon Please review this PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| const updateIframeHeight = () => { | ||
| const windowWidth = window.innerWidth; | ||
|
|
||
| if (windowWidth < 900) { | ||
| setIframeHeight(830); | ||
| } else if (windowWidth < 1250) { | ||
| setIframeHeight(700); | ||
| } else { | ||
| setIframeHeight(670); | ||
| } | ||
| }; | ||
|
|
||
| updateIframeHeight(); | ||
|
|
||
| window.addEventListener('resize', updateIframeHeight); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('resize', updateIframeHeight); | ||
| }; |
There was a problem hiding this comment.
The new hunk introduces an event listener for the resize event to dynamically adjust the iframe height based on the window width. This is a good approach to enhance the responsiveness of the component. The cleanup function to remove the event listener when the component is unmounted is also correctly implemented, which is crucial to prevent potential memory leaks. However, there is a potential performance issue here. The resize event can fire many times per second during a "resize" operation, leading to high processing overhead if the event handler does much work. In this case, the event handler updateIframeHeight calls setIframeHeight which triggers a re-render of the component. To mitigate this, consider debouncing the updateIframeHeight function to limit the rate at which it's invoked.
+ import { debounce } from 'lodash';
useEffect(() => {
const updateIframeHeight = debounce(() => {
const windowWidth = window.innerWidth;
if (windowWidth < 900) {
setIframeHeight(830);
} else if (windowWidth < 1250) {
setIframeHeight(700);
} else {
setIframeHeight(670);
}
}, 250); // Debounce time in milliseconds
updateIframeHeight();
window.addEventListener('resize', updateIframeHeight);
return () => {
window.removeEventListener('resize', updateIframeHeight);
};
}, []);Committable suggestion (Beta)
| const updateIframeHeight = () => { | |
| const windowWidth = window.innerWidth; | |
| if (windowWidth < 900) { | |
| setIframeHeight(830); | |
| } else if (windowWidth < 1250) { | |
| setIframeHeight(700); | |
| } else { | |
| setIframeHeight(670); | |
| } | |
| }; | |
| updateIframeHeight(); | |
| window.addEventListener('resize', updateIframeHeight); | |
| return () => { | |
| window.removeEventListener('resize', updateIframeHeight); | |
| }; | |
| import { debounce } from 'lodash'; | |
| const NewsLetter = () => { | |
| const [iframeHeight, setIframeHeight] = useState(670); | |
| useEffect(() => { | |
| const updateIframeHeight = debounce(() => { | |
| const windowWidth = window.innerWidth; | |
| if (windowWidth < 900) { | |
| setIframeHeight(830); | |
| } else if (windowWidth < 1250) { | |
| setIframeHeight(700); | |
| } else { | |
| setIframeHeight(670); | |
| } | |
| }, 250); // Debounce time in milliseconds | |
| updateIframeHeight(); | |
| window.addEventListener('resize', updateIframeHeight); | |
| return () => { | |
| window.removeEventListener('resize', updateIframeHeight); | |
| }; | |
| }, []); | |
| return ( | |
| // Rest of the component | |
| ); | |
| }; | |
| export default NewsLetter; |
Fixes Issue
This PR fixes the following issues:
closes #741
Changes proposed
I made the changes in the Newsletter.jsx with which the scrollbar showing in the mobile phone won't show anymore.
Here comes all the changes proposed through this PR
Check List (Check all the boxes which are applicable)
Screenshots
Add all the screenshots which support your changes
Summary by CodeRabbit
NewsLettersection on our website. The section now dynamically adjusts its size based on your screen size, providing a better viewing experience across different devices. This update ensures that the content is always displayed in an optimal manner, regardless of how you resize your browser window.