From f0e64c37f94d237ff5e7fbecaa3cc2f3fcd9a9c8 Mon Sep 17 00:00:00 2001
From: ZanzyTHEbar <pyr0ndet0s97@gmail.com>
Date: Fri, 17 Feb 2023 13:56:24 +0000
Subject: [PATCH] feat: add loader

---
 GUI/ETVR/ETVR.code-workspace               |  3 ++
 GUI/ETVR/src/components/Loader/index.tsx   | 41 +++++++++++++++++++
 GUI/ETVR/src/components/Loader/styles.css  | 46 ++++++++++++++++++++++
 GUI/ETVR/src/components/Loaders/index.tsx  | 10 -----
 GUI/ETVR/src/components/Settings/index.tsx | 11 ++++++
 5 files changed, 101 insertions(+), 10 deletions(-)
 create mode 100644 GUI/ETVR/src/components/Loader/index.tsx
 create mode 100644 GUI/ETVR/src/components/Loader/styles.css
 delete mode 100644 GUI/ETVR/src/components/Loaders/index.tsx

diff --git a/GUI/ETVR/ETVR.code-workspace b/GUI/ETVR/ETVR.code-workspace
index 05eb5392..98a16a97 100644
--- a/GUI/ETVR/ETVR.code-workspace
+++ b/GUI/ETVR/ETVR.code-workspace
@@ -46,6 +46,9 @@
         "liveServer.settings.multiRootWorkspaceName": "ETVR",
         "[typescriptreact]": {
             "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[css]": {
+            "editor.defaultFormatter": "vscode.css-language-features"
         }
     }
 }
diff --git a/GUI/ETVR/src/components/Loader/index.tsx b/GUI/ETVR/src/components/Loader/index.tsx
new file mode 100644
index 00000000..b0426ac1
--- /dev/null
+++ b/GUI/ETVR/src/components/Loader/index.tsx
@@ -0,0 +1,41 @@
+import './styles.css'
+
+interface LoaderProps {
+    gradient?: string
+    gradientMid?: string
+    gradientBot?: string
+    width?: string
+    height?: string
+}
+
+const Loader = (props: LoaderProps) => {
+    return (
+        <div class="spinner">
+            <svg
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
+                class="shape"
+                preserveAspectRatio="none"
+                style={{
+                    width: props.width || '100%',
+                    height: props.height || '100%',
+                }}>
+                <defs>
+                    <linearGradient id="shape-gradient" x2="0.35" y2="1">
+                        <stop offset="0%" stop-color={props.gradient || 'var(--color-stop)'} />
+                        <stop
+                            offset="30%"
+                            stop-color={props.gradientMid || 'var(--color-middle-bot)'}
+                        />
+                        <stop offset="100%" stop-color={props.gradientBot || 'var(--color-bot)'} />
+                    </linearGradient>
+                </defs>
+                <g>
+                    <circle class="gradient-bg" cx="50" cy="50" r="20" />
+                </g>
+            </svg>
+        </div>
+    )
+}
+
+export default Loader
diff --git a/GUI/ETVR/src/components/Loader/styles.css b/GUI/ETVR/src/components/Loader/styles.css
new file mode 100644
index 00000000..953f0092
--- /dev/null
+++ b/GUI/ETVR/src/components/Loader/styles.css
@@ -0,0 +1,46 @@
+#shape-gradient {
+    --color-stop: orange;
+    --color-middle-bot: rgba(255, 153, 0, 0.594);
+    --color-bot: rgba(255, 153, 0, 0.344);
+}
+
+.shape {
+    animation: rotate 4s ease-in-out infinite, dash 1.5s ease-in-out infinite;
+}
+
+.shape .gradient-bg {
+    stroke: url(#shape-gradient);
+    fill: none;
+    stroke-width: 0.25;
+}
+
+.spinner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(-360deg);
+    }
+}
\ No newline at end of file
diff --git a/GUI/ETVR/src/components/Loaders/index.tsx b/GUI/ETVR/src/components/Loaders/index.tsx
deleted file mode 100644
index b5444f5b..00000000
--- a/GUI/ETVR/src/components/Loaders/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-const Loaders = () => {
-    return (
-        <div>
-            Loaders
-        </div>
-    )
-}
-
-export default Loaders
-                                                             
\ No newline at end of file
diff --git a/GUI/ETVR/src/components/Settings/index.tsx b/GUI/ETVR/src/components/Settings/index.tsx
index 7813a3af..fdb25509 100644
--- a/GUI/ETVR/src/components/Settings/index.tsx
+++ b/GUI/ETVR/src/components/Settings/index.tsx
@@ -1,5 +1,6 @@
 import CameraAddress from './CameraAddress/CameraAddress'
 import CameraInfo from './CameraInfo/CameraInfo'
+import Loader from '@components/Loader'
 import { CameraStatus, CameraType } from '@store/camera/camera'
 
 // TODO: stuff todo requested by lorow
@@ -27,6 +28,16 @@ const Settings = (props: IProps) => {
                 cameraType={props.cameraType}
             />
             <CameraAddress onChange={(value) => props.onChange(value)} />
+            <br />
+            <div class="flex justify-center items-center">
+                <Loader
+                    gradient="orange"
+                    gradientMid="rgba(255, 153, 0, 0.594)"
+                    gradientBot="rgba(255, 153, 0, 0.144)"
+                    width="100px"
+                    height="100px"
+                />
+            </div>
         </div>
     )
 }