refactor: attempt at failed loader state

- issue with alignment

Author: ZanzyTHEbar

GUI/ETVR/src/components/Camera/index.tsx

@@ -14,7 +14,7 @@ const Camera = (props: IProps) => {
             onClick={() => props.onClick()}>
             <div class="responsive-flex-container w-full h-full flex items-center flex-row">
                 <div class="responsive-iframe-container flex items-center h-full w-full ">
-                    <div class="h-full w-full">
+                    <div class="h-full w-full ">
                         <WebSocketHandler status={props.status} />
                     </div>
                 </div>

GUI/ETVR/src/components/Loader/index.tsx

@@ -5,22 +5,51 @@ interface LoaderProps {
     gradientMid: string
     gradientBot: string
     width: string
+    height: string
 }
 
 interface CustomLoaderProps {
     width: number
+    height: number
     unit?: string
 }
 
-const CircularLoader = (props: LoaderProps) => {
+export const XLoader = (props: LoaderProps) => {
     return (
         <div class="spinner">
             <svg
                 viewBox="0 0 100 100"
+                fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                class="shape"
                 preserveAspectRatio="none"
-                style={{ width: props.width }}>
+                width={props.width}
+                height={props.height}>
+                <defs>
+                    <linearGradient id="x-shape-gradient" x2="0.35" y2="1">
+                        <stop offset="0%" stop-color={props.gradient} />
+                        <stop offset="30%" stop-color={props.gradientMid} />
+                        <stop offset="100%" stop-color={props.gradientBot} />
+                    </linearGradient>
+                </defs>
+                <path
+                    d="M76.4969 11.3291C78.7942 8.54415 78.4233 4.40773 75.6653 2.08829C74.4498 1.06618 72.9739 0.566208 71.5073 0.566208C69.6443 0.566208 67.7962 1.37052 66.5125 2.9287L39 36.4307L11.4969 3.10548C10.2115 1.54812 8.36469 0.742981 6.50204 0.742981C5.03568 0.742981 3.56079 1.24297 2.34407 2.26508C-0.414369 4.5845 -0.786088 8.72093 1.51247 11.5059L30.539 46.6768L1.5076 81.6709C-0.790353 84.4559 -0.419041 88.5923 2.34001 90.9117C5.09438 93.2373 9.19141 92.8633 11.4928 90.0721L39 56.7539L66.5031 90.0791C68.7984 92.8641 72.8975 93.2414 75.6559 90.9187C78.4144 88.5993 78.7861 84.4628 76.4875 81.6779L47.461 46.507L76.4969 11.3291Z"
+                    fill="url(#x-shape-gradient)"
+                />
+            </svg>
+        </div>
+    )
+}
+
+export const CircularLoader = (props: LoaderProps) => {
+    return (
+        <div class="spinner">
+            <svg
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
+                class="shape"
+                width={props.width}
+                height={props.height}
+                preserveAspectRatio="none">
                 <defs>
                     <linearGradient id="shape-gradient" x2="0.35" y2="1">
                         <stop offset="0%" stop-color={props.gradient} />
@@ -44,9 +73,22 @@ export const OrangeLoader = (props: CustomLoaderProps) => {
                 gradientMid="rgba(255, 153, 0, 0.594)"
                 gradientBot="rgba(255, 153, 0, 0.144)"
                 width={`${props.width}${props.unit || 'px'}`}
+                height={`${props.height}${props.unit || 'px'}`}
             />
         </div>
     )
 }
 
-export default CircularLoader
+export const MagentaLoader = (props: CustomLoaderProps) => {
+    return (
+        <div class="flex justify-center items-center">
+            <XLoader
+                gradient="magenta"
+                gradientMid="rgba(255, 0, 255, 0.594)"
+                gradientBot="rgba(255, 0, 255, 0.144)"
+                width={`${props.width}${props.unit || 'px'}`}
+                height={`${props.height}${props.unit || 'px'}`}
+            />
+        </div>
+    )
+}

GUI/ETVR/src/components/WebSocket/index.tsx

@@ -1,5 +1,5 @@
 import { Show } from 'solid-js'
-import { OrangeLoader } from '@components/Loader'
+import { OrangeLoader, MagentaLoader } from '@components/Loader'
 import { CameraStatus } from '@store/camera/camera'
 import { showCameraView } from '@store/ui/selectors'
 
@@ -13,19 +13,17 @@ export const LoaderHandler = (props: IWsProps) => {
     return (
         <>
             <Show when={props.status == CameraStatus.LOADING}>
-                <OrangeLoader width={100} unit={'%'} />
+                <OrangeLoader width={100} height={100} unit={'%'} />
             </Show>
             <Show when={props.status == CameraStatus.ACTIVE}>
-                <OrangeLoader width={100} unit={'%'} />
+                <OrangeLoader width={100} height={100} unit={'%'} />
             </Show>
-            <Show when={props.status == CameraStatus.DISABLED}>
-                <OrangeLoader width={100} unit={'%'} />
-            </Show>
-            <Show when={props.status == CameraStatus.FAILED}>
-                <OrangeLoader width={100} unit={'%'} />
+            <Show
+                when={props.status == CameraStatus.DISABLED || props.status == CameraStatus.FAILED}>
+                <MagentaLoader width={50} height={50} unit={'%'} />
             </Show>
             <Show when={props.status == CameraStatus.NONE}>
-                <OrangeLoader width={100} unit={'%'} />
+                <OrangeLoader width={100} height={100} unit={'%'} />
             </Show>
         </>
     )
@@ -39,7 +37,7 @@ const WebSocketHandler = (props: IWsProps) => {
                 fallback={() => (
                     <div
                         class={
-                            'text-[#FFFF] flex justify-center bg-[#2b2f38]   rounded-t-xl min-[1750px]:rounded-xl w-full h-full'
+                            'text-[#FFFF] flex justify-center items-center bg-[#2b2f38] rounded-t-xl min-[1750px]:rounded-xl w-full h-full'
                         }>
                         <LoaderHandler status={props.status} />
                     </div>