From acba97d5ad37322d4c2addc2fbbe79e1878a5890 Mon Sep 17 00:00:00 2001
From: Romain <romain.rousseau5@gmail.com>
Date: Tue, 15 Sep 2020 12:36:30 +0200
Subject: [PATCH] creating withFallback HOC

---
 hocs/withFallback.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 hocs/withFallback.js

diff --git a/hocs/withFallback.js b/hocs/withFallback.js
new file mode 100644
index 0000000..4c67c66
--- /dev/null
+++ b/hocs/withFallback.js
@@ -0,0 +1,33 @@
+import { useRouter } from "next/router";
+import styled from "styled-components";
+import LoadingAnimation from "../components/LoadingAnimation";
+
+const Center = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100vh;
+`;
+
+/**
+ * HOC for statically rendered page with fallback activated
+ * @param {} WrappedComponent
+ */
+export default function withFallback(WrappedComponent) {
+  const withFallbackWrapper = (props) => {
+    const router = useRouter();
+
+    if (router.isFallback) {
+      return (
+        <Center>
+          <LoadingAnimation message={"Loading..."} />
+        </Center>
+      );
+    }
+
+    return <WrappedComponent {...props} />;
+  };
+
+  return withFallbackWrapper;
+}