Remade and extended the app using React

2 files changed, 37 insertions, 0 deletions

diff --git a/src/components/LoadingScreen/LoadingScreen.module.css b/src/components/LoadingScreen/LoadingScreen.module.css
new file mode 100644
index 0000000..1f690bd
--- /dev/null
+++ b/src/components/LoadingScreen/LoadingScreen.module.css
@@ -0,0 +1,27 @@
+.container {

+    width: 100%;

+    height: 100%;

+    position: absolute;

+    top: 0;

+    left: 0;

+    display: flex;

+    z-index: 99999;

+    background: rgb(255 255 255 / 75%);

+}

+

+.spinner {

+  width: 50px;

+  height: 50px;

+  margin: auto;

+  display: inline-block;

+  border: 3px solid #c9c9c9;

+  border-radius: 50%;

+  border-top-color: #25a070;

+  animation: spin 1s ease-in-out infinite;

+}

+

+@keyframes spin {

+  to {

+    transform: rotate(360deg);

+  }

+}

diff --git a/src/components/LoadingScreen/LoadingScreen.tsx b/src/components/LoadingScreen/LoadingScreen.tsx
new file mode 100644
index 0000000..22509ee
--- /dev/null
+++ b/src/components/LoadingScreen/LoadingScreen.tsx
@@ -0,0 +1,10 @@
+import React from 'react';

+import styles from './LoadingScreen.module.css';

+

+export default function LoadingScreen(): JSX.Element {

+  return (

+    <div className={styles.container}>

+      <div className={styles.spinner}></div>

+    </div>

+  );

+}