Prevent scrollbar from shortly disappearing on library category change
Due to the MangaGrid getting unmounted when changing the category, the "y overflow" value got reset to "auto" which caused the scrollbar from disappearing and immediately reappearing again.
This caused the site content to slightly "jump" due to the increase and immediate decrease in is width.
Related commit 871908eba9
This commit is contained in:
@@ -6,11 +6,11 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useLayoutEffect } from 'react';
|
||||
import { StringParam, useQueryParam } from 'use-query-params';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TManga } from '@/typings';
|
||||
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
|
||||
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
|
||||
import { IMangaGridProps, MangaGrid } from '@/components/MangaGrid';
|
||||
|
||||
interface LibraryMangaGridProps
|
||||
@@ -37,6 +37,13 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
|
||||
window.scrollTo(0, 0);
|
||||
}, [query, unread, downloaded]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
document.body.style.overflowY = options.gridLayout === GridLayout.List ? 'auto' : 'scroll';
|
||||
return () => {
|
||||
document.body.style.overflowY = 'auto';
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<MangaGrid
|
||||
{...gridProps}
|
||||
|
||||
Reference in New Issue
Block a user