diff --git a/src/components/SlideshowPicker/SlideshowPicker.js b/src/components/SlideshowPicker/SlideshowPicker.js
index d638564..330780a 100644
--- a/src/components/SlideshowPicker/SlideshowPicker.js
+++ b/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 (
-
- LOADING
-
+
);
}
if (error) {
return (
-
- {error}
-
+
);
}
diff --git a/src/components/ui/ErrorMessage.css b/src/components/ui/ErrorMessage.css
new file mode 100644
index 0000000..b73e76e
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/ui/ErrorMessage.js b/src/components/ui/ErrorMessage.js
new file mode 100644
index 0000000..5c55fe2
--- /dev/null
+++ b/src/components/ui/ErrorMessage.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import "./ErrorMessage.css";
+
+const ErrorMessage = ({ error }) => {
+ return (
+
+
Something happened!
+
+
+ {JSON.stringify(error, null, 2)}
+
+
+ );
+};
+
+export default ErrorMessage;
diff --git a/src/components/ui/Loading.css b/src/components/ui/Loading.css
new file mode 100644
index 0000000..d0fd48e
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/components/ui/Loading.js b/src/components/ui/Loading.js
new file mode 100644
index 0000000..5e71c73
--- /dev/null
+++ b/src/components/ui/Loading.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './Loading.css';
+
+const Loading = () => {
+ return (
+
+ );
+};
+
+export default Loading;