diff --git a/frontend/src/App/State/AppState.ts b/frontend/src/App/State/AppState.ts index 5add86a4e..04f7a609f 100644 --- a/frontend/src/App/State/AppState.ts +++ b/frontend/src/App/State/AppState.ts @@ -39,8 +39,17 @@ export interface CustomFilter { filers: PropertyFilter[]; } +export interface AppSectionState { + dimensions: { + isSmallScreen: boolean; + width: number; + height: number; + }; +} + interface AppState { albums: AlbumAppState; + app: AppSectionState; artist: ArtistAppState; artistIndex: ArtistIndexAppState; history: HistoryAppState; diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx b/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx index 8c27d363d..cd067053d 100644 --- a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx +++ b/frontend/src/Artist/Index/Posters/ArtistIndexPosters.tsx @@ -213,13 +213,18 @@ export default function ArtistIndexPosters(props: ArtistIndexPostersProps) { if (current) { const width = current.clientWidth; const padding = bodyPadding - 5; + const finalWidth = width - padding * 2; + + if (Math.abs(size.width - finalWidth) < 20 || size.width === finalWidth) { + return; + } setSize({ - width: width - padding * 2, + width: finalWidth, height: window.innerHeight, }); } - }, [isSmallScreen, scrollerRef, bounds]); + }, [isSmallScreen, size, scrollerRef, bounds]); useEffect(() => { const currentScrollListener = isSmallScreen ? window : scrollerRef.current; diff --git a/frontend/src/Store/Selectors/createDimensionsSelector.js b/frontend/src/Store/Selectors/createDimensionsSelector.ts similarity index 69% rename from frontend/src/Store/Selectors/createDimensionsSelector.js rename to frontend/src/Store/Selectors/createDimensionsSelector.ts index ce26b2e2c..b9602cb02 100644 --- a/frontend/src/Store/Selectors/createDimensionsSelector.js +++ b/frontend/src/Store/Selectors/createDimensionsSelector.ts @@ -1,8 +1,9 @@ import { createSelector } from 'reselect'; +import AppState from 'App/State/AppState'; function createDimensionsSelector() { return createSelector( - (state) => state.app.dimensions, + (state: AppState) => state.app.dimensions, (dimensions) => { return dimensions; }