fix(scroll): resolve race condition in onClick scroll-to-top behavior

This commit is contained in:
plebeius.eth
2023-10-05 16:42:47 +02:00
parent bdb661b0dc
commit d5715e29eb
12 changed files with 124 additions and 287 deletions
+9 -32
View File
@@ -160,14 +160,9 @@ const Description = () => {
<NavBar selectedStyle={selectedStyle}>
<>
<span className='boardList'>
[
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
All
</Link>
[<Link to={{ pathname: `/p/all`, state: { scrollToTop: true } }}>All</Link>
 / 
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
Subscriptions
</Link>
<Link to={{ pathname: `/p/subscriptions`, state: { scrollToTop: true } }}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className='boardList' key={`span-${subplebbit.address}`}>
@@ -245,7 +240,6 @@ const Description = () => {
to='/'
onClick={() => {
handleStyleChange({ target: { value: 'Yotsuba' } });
window.scrollTo(0, 0);
}}
>
Home
@@ -275,25 +269,13 @@ const Description = () => {
<PostForm selectedStyle={selectedStyle}>
<ReplyFormLink id='post-form-link' selectedStyle={selectedStyle} style={{ marginBottom: '10px' }}>
<div id='return-button-mobile'>
<span
className='btn-wrap'
onClick={() => {
window.scrollTo(0, 0);
}}
>
<Link to={`/p/${selectedAddress}`}>Return</Link>
<span className='btn-wrap'>
<Link to={{ pathname: `/p/${selectedAddress}`, state: { scrollToTop: true } }}>Return</Link>
</span>
</div>
<div id='catalog-button-mobile'>
<span className='btn-wrap'>
<Link
to={`/p/${selectedAddress}/catalog`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Catalog
</Link>
<Link to={{ pathname: `/p/${selectedAddress}/catalog`, state: { scrollToTop: true } }}>Catalog</Link>
</span>
</div>
<div id='bottom-button-mobile'>
@@ -323,10 +305,10 @@ const Description = () => {
</select>
</span>
<span className='return-button' id='return-button-desktop'>
[<Link to={`/p/${selectedAddress}`}>Return</Link>]
[<Link to={{ pathname: `/p/${selectedAddress}`, state: { scrollToTop: true } }}>Return</Link>]
</span>
<span className='return-button catalog-button' id='catalog-button-desktop'>
[<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>]
[<Link to={{ pathname: `/p/${selectedAddress}/catalog`, state: { scrollToTop: true } }}>Catalog</Link>]
</span>
<span className='return-button catalog-button' id='bottom-button-desktop'>
[
@@ -694,14 +676,9 @@ const Description = () => {
>
<>
<span className='boardList'>
[
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
All
</Link>
[<Link to={{ pathname: `/p/all`, state: { scrollToTop: true } }}>All</Link>
 / 
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
Subscriptions
</Link>
<Link to={{ pathname: `/p/subscriptions`, state: { scrollToTop: true } }}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (