swimmingpolar/infinite-scroll-example

infinite-scroll-example's Issues

Flashing between transition from profile -> community page

Summary:
There's a flash when router path changes.

Reproduce:
profile page (scrolled down a bit) -> community

Suggestion:
A possible cause of the issue is that HOC hides all components including the ones without such feature demand when restoring scroll.

ScrollRestoration component design flaw

infinite-scroll-example/infinite-scroll/src/components/ScrollRestoration/index.tsx

Lines 14 to 47 in 98c9797

	const scrollStorage = new Map<string, number>()
	const ScrollRestorationContext = createContext({
	childMounted: false,
	_provider: false
	})
	/**
	* hide child on condition
	*/
	interface HideOnRestoreProps {
	childMounted: boolean
	}
	const HideOnRestore = styled.div<HideOnRestoreProps>`
	visibility: ${({ childMounted }) => (childMounted ? 'visible' : 'hidden')};
	`
	/**
	* ScrollRestoration: parent
	*/
	export const ScrollRestoration = ({ children }: { children: JSX.Element }) => {
	const { pathname } = useLocation()
	const [value, setValue] = useState({
	childMounted: false,
	_provider: true
	})
	useEffect(() => {
	setValue(prev => ({ ...prev, childMounted: true }))
	}, [])
	useEffect(() => {
	const handleScroll = () => scrollStorage.set(pathname, window.scrollY)

design structure may not be in best shape