Added ui components.

src/components/SlideshowPicker/SlideshowPicker.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import useFetch from '../../hooks/fetch';
 import PickerItem from '../PickerItem/PickerItem';
+import Loading from '../ui/Loading';
+import ErrorMessage from '../ui/ErrorMessage';
 import './SlideshowPicker.css';
 
 const SlideshowPicker = () => {
@@ -8,17 +10,13 @@ const SlideshowPicker = () => {
 
   if (loading) {
     return (
-      <div>
+      <Loading />
-        LOADING
-      </div>
     );
   }
 
   if (error) {
     return (
-      <div>
+      <ErrorMessage error={error.message} />
-        {error}
-      </div>
     );
   }
 

src/components/ui/ErrorMessage.css

@@ -0,0 +1,21 @@
+.error {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  padding: 2rem;
+  background: pink;
+  border-radius: 5px;
+}
+
+.error h2 {
+  margin-bottom: 1rem;
+  color: red;
+}
+
+.error pre {
+  padding: 1rem;
+  background: #eee;
+  border-radius: 5px;
+}

src/components/ui/ErrorMessage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import "./ErrorMessage.css";
+
+const ErrorMessage = ({ error }) => {
+  return (
+    <div className="error">
+      <h2>Something happened!</h2>
+
+      <pre>
+        {JSON.stringify(error, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+export default ErrorMessage;

src/components/ui/Loading.css

@@ -0,0 +1,19 @@
+.loading {
+  width: 50px;
+  height: 50px;
+
+  position: fixed;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+
+  animation: rotation 1.5s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}

src/components/ui/Loading.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Loading.css';
+
+const Loading = () => {
+  return (
+    <img className="loading" src="/android-chrome-256x256.png" alt="logo" />
+  );
+};
+
+export default Loading;