Improve scroll handling and cache fetch results

webclient/src/ManageScroll.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect, useReducer, useContext } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+
+let scrollPositions = {};
+let timeout = null;
+
+export function ManageScroll() {
+	const history = useHistory();
+
+	const scrollListener = () => {
+		if (timeout) {
+			window.cancelAnimationFrame(timeout);
+		}
+
+		timeout = window.requestAnimationFrame(() => {
+			const key = history.location.key;
+			if (key in scrollPositions) {
+				scrollPositions[key] = window.scrollY;
+			}
+		});
+	};
+
+	useEffect(() => {
+		window.addEventListener('scroll', scrollListener);
+		return () => {
+			window.removeEventListener('scroll', scrollListener);
+		}
+	}, []);
+
+	useEffect(() => {
+		const key = history.location.key;
+
+		if (key in scrollPositions) {
+			window.scrollTo(0, scrollPositions[key]);
+		} else {
+			window.scrollTo(0, 0);
+			scrollPositions[key] = 0;
+		}
+	}, [history.location]);
+
+	return (
+		null
+	);
+};