add skeleton

Author: solygambas

marmite/components/Skeleton.js

@@ -0,0 +1,35 @@
+function Skeleton() {
+  return (
+    <div className="skeleton">
+      <div className="s-banner"></div>
+      <div className="s-header"></div>
+      <div className="s-content"></div>
+      <div className="s-content"></div>
+      <div className="s-content"></div>
+      <style jsx>{`
+        .skeleton {
+          max-width: 1200px;
+          margin: 20px auto;
+        }
+        .skeleton > div {
+          background: #dbcc1a;
+          border-radius: 4px;
+          margin: 20px 0;
+        }
+        .s-banner {
+          padding: 12% 0;
+        }
+        .s-header {
+          padding: 15px 0;
+          max-width: 500px;
+        }
+        .s-content {
+          padding: 8px 0;
+          max-width: 1000px;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default Skeleton;

marmite/pages/recipes/[slug].js

@@ -1,6 +1,7 @@
 import { createClient } from "contentful";
 import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
 import Image from "next/image";
+import Skeleton from "../../components/Skeleton";
 
 const client = createClient({
   space: process.env.CONTENTFUL_SPACE_ID,
@@ -14,7 +15,10 @@ export const getStaticPaths = async () => {
       params: { slug: item.fields.slug },
     };
   });
-  return { paths, fallback: false };
+  return {
+    paths,
+    fallback: true, // handle new recipes
+  };
 };
 
 export async function getStaticProps({ params }) {
@@ -31,6 +35,8 @@ export async function getStaticProps({ params }) {
 }
 
 export default function RecipeDetails({ recipe }) {
+  if (!recipe) return <Skeleton />;
+
   const {
     featuredImage,
     title,