diff --git a/src/components/MoreComponents.tsx b/src/components/MoreComponents.tsx index 9ea25b20..f6904cd6 100644 --- a/src/components/MoreComponents.tsx +++ b/src/components/MoreComponents.tsx @@ -47,7 +47,12 @@ export default function MoreComponents({ setStateForKey(stateKey, stateForKey), [setStateForKey, stateKey]); + useEffect(() => { + setState({ hasMounted: true }); + }, [setState]); + const { + hasMounted, isLoading, indexInView, finalIndex, @@ -84,7 +89,9 @@ export default function MoreComponents({ const currentTimeout = useRef(); const attempt = useCallback(() => { - const handleError = () => { + // Consider creating temp, anonymous function + // for error handling + const attemptRetry = () => { if (currentTimeout.current) { clearTimeout(currentTimeout.current); } @@ -118,14 +125,17 @@ export default function MoreComponents({ latestIndexLoaded: indexToLoad, isLoading: false, didReachMaximumRequests: false, - ...isFinished && { finalIndex: indexToLoad }, + ...isFinished && { + // Special case when finished on first request + finalIndex: indexToLoad === 0 ? -1 : indexToLoad, + }, }; }); } else { - handleError(); + attemptRetry(); } }) - .catch(handleError); + .catch(attemptRetry); } else { console.log( `Max total attempts reached (${MAX_TOTAL_REQUESTS})` @@ -207,7 +217,7 @@ export default function MoreComponents({ onClick={didReachMaximumRequests ? resetRequestsAndRetry : advance} disabled={isLoading} > - {isLoading + {isLoading || !hasMounted ? @@ -221,6 +231,9 @@ export default function MoreComponents({ indexInView, componentsLength: components.length, finalIndex, + hasFinalIndexBeenReached, + areAllComponentsVisible, + isLoading, }); } diff --git a/src/photo/MorePhotosGrid.tsx b/src/photo/MorePhotosGrid.tsx index 91d4bd62..ec39f293 100644 --- a/src/photo/MorePhotosGrid.tsx +++ b/src/photo/MorePhotosGrid.tsx @@ -37,14 +37,17 @@ export function MorePhotosGrid({ }; } }, [totalPhotosCount]); + return ( - + initialOffset <= totalPhotosCount + ? + : null ); } diff --git a/src/photo/MorePhotosRoot.tsx b/src/photo/MorePhotosRoot.tsx index 3bb44331..91b7eef5 100644 --- a/src/photo/MorePhotosRoot.tsx +++ b/src/photo/MorePhotosRoot.tsx @@ -35,15 +35,18 @@ export function MorePhotosRoot({ }; } }, [totalPhotosCount]); + return ( - + initialOffset <= totalPhotosCount + ? + :null ); } diff --git a/src/state/MoreComponentsState.ts b/src/state/MoreComponentsState.ts index fb06deb5..82295f6e 100644 --- a/src/state/MoreComponentsState.ts +++ b/src/state/MoreComponentsState.ts @@ -5,6 +5,7 @@ export type MoreComponentsKey = 'PhotosGrid'; export interface MoreComponentsStateForKey { + hasMounted: boolean isLoading: boolean indexInView?: number finalIndex?: number @@ -14,6 +15,7 @@ export interface MoreComponentsStateForKey { export const createInitialStateForKey = (): MoreComponentsStateForKey => ({ + hasMounted: false, isLoading: false, didReachMaximumRequests: false, components: [],