From de84658b48985e24b0f92a1690387f6d59d0bc16 Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Fri, 18 Sep 2020 01:28:21 +0000
Subject: [PATCH] feat(frontend): loading spinner

---
 .../Common/LoadingSpinner/index.tsx           | 32 +++++++++++++++++++
 src/components/MovieDetails/index.tsx         |  6 ++--
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Common/LoadingSpinner/index.tsx

diff --git a/src/components/Common/LoadingSpinner/index.tsx b/src/components/Common/LoadingSpinner/index.tsx
new file mode 100644
index 000000000..570de01a4
--- /dev/null
+++ b/src/components/Common/LoadingSpinner/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+const LoadingSpinner: React.FC = () => {
+  return (
+    <div className="h-64 inset-0 flex justify-center items-center text-cool-gray-200">
+      <svg
+        className="w-16 h-16"
+        viewBox="0 0 38 38"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+      >
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(1 1)" strokeWidth="2">
+            <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 18 18"
+                to="360 18 18"
+                dur="1s"
+                repeatCount="indefinite"
+              />
+            </path>
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default LoadingSpinner;
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 3f9053de5..ee2dd525a 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -19,6 +19,7 @@ import Slider from '../Slider';
 import TitleCard from '../TitleCard';
 import PersonCard from '../PersonCard';
 import { LanguageContext } from '../../context/LanguageContext';
+import LoadingSpinner from '../Common/LoadingSpinner';
 
 const messages = defineMessages({
   releasedate: 'Release Date',
@@ -99,12 +100,13 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   };
 
   if (!data && !error) {
-    return <div>loading!</div>;
+    return <LoadingSpinner />;
   }
 
   if (!data) {
-    return <div>Unknwon?</div>;
+    return <div>Broken?</div>;
   }
+
   return (
     <div
       className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "