frontend: emdoublebacken on SWR, it does not fit our cache implementa…

…tion

frontend/package.json

@@ -13,8 +13,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.2.0",
-    "react-svg-spinner": "^1.0.4",
-    "swr": "^0.1.9"
+    "react-svg-spinner": "^1.0.4"
   },
   "devDependencies": {
     "@types/history": "^4.7.3",

frontend/src/components/MainView.tsx

@@ -1,42 +1,59 @@
-import React, { Suspense } from 'react';
-import useSWR from 'swr';
+import React from 'react';
 
 import AlbumView from './AlbumView';
 import Loading from './Loading';
 import PictureView from './PictureView';
 import { Content, getAlbum } from '../helpers/getAlbum';
 import { RouteComponentProps } from 'react-router';
-import ErrorBoundary from './ErrorBoundary';
+
+const loadingViewDelayMillis = 500;
 
 const MainView: React.FC<RouteComponentProps<{}>> = ({ location, history }) => {
   const path = location.pathname;
+  const [loading, setLoading] = React.useState(true);
+  const [content, setContent] = React.useState<Content | null>(null);
 
-  const { data } = useSWR<Content>(path, getAlbum, { suspense: true });
-  const { album, picture } = data!;
+  React.useEffect(() => {
+    // TODO: not exactly NodeJS, fix tsconfig
+    let timeout: NodeJS.Timeout | null = null;
 
-  if (album.redirect_url) {
-    if (album.redirect_url.indexOf('://') >= 0) {
-      document.location.href = album.redirect_url;
-    } else {
-      setTimeout(() => history.push(album.redirect_url), 0);
-    }
+    (async () => {
+      // Only show the loading indicator if the request is slow.
+      timeout = setTimeout(() => setLoading(true), loadingViewDelayMillis);
+
+      const content = await getAlbum(path);
+
+      clearTimeout(timeout);
+      setContent(content);
+      setLoading(false);
+    })();
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [path]);
 
+  if (loading || !content) {
     return <Loading />;
-  } else if (picture) {
-    return <PictureView album={album} picture={picture} />;
   } else {
-    return <AlbumView album={album} />;
-  }
-};
+    const { album, picture } = content;
+
+    if (album.redirect_url) {
+      if (album.redirect_url.indexOf('://') >= 0) {
+        document.location.href = album.redirect_url;
+      } else {
+        setTimeout(() => history.push(album.redirect_url), 0);
+      }
 
-const MainViewSuspense: React.FC<RouteComponentProps<{}>> = props => {
-  return (
-    <ErrorBoundary>
-      <Suspense fallback={<Loading />}>
-        <MainView {...props} />
-      </Suspense>
-    </ErrorBoundary>
-  );
+      return <Loading />;
+    } else if (picture) {
+      return <PictureView album={album} picture={picture} />;
+    } else {
+      return <AlbumView album={album} />;
+    }
+  }
 };
 
-export default MainViewSuspense;
+export default MainView;