feat(frontend): loading spinner

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;

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 "