add a waiting status on device cards

frontend/src/components/Settings/DeviceCard.svelte

@@ -16,6 +16,7 @@
     export let signalized = false;
     export let disconnected = false;
     export let selected = false;
+    export let waiting = false;
 
     // Emit a delete event when the device is being removed
     const dispatch = createEventDispatcher();
@@ -37,8 +38,8 @@
 </script>
 
 <div class="card" on:dblclick={dblclick}>
-    <div class="profile {selected ? "selected" : "unselected"}" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
-        <div>
+    <div class="{selected ? "selected" : "unselected"} {waiting ? "waiting" : ""}" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
+        <div style="z-index: 1;">
             <p>{#if disconnected}<i class='bx bx-no-signal' style="font-size:100%; color: var(--nok-color);"></i> {/if}{title}</p>
             <h6 class="subtitle">{type} {location != '' ? "- " : ""}<i>{location}</i></h6>
             {#if disconnected}
@@ -77,23 +78,12 @@
         text-align: left;
         cursor: pointer;
     }
-    .unselected{
-        background-color: var(--third-color);
-        background: fixed;
-        margin: 0.2em;
-        padding-left: 0.3em;
-        padding-bottom: 0.3em;
-        border-radius: 0.2em;
-        display: flex;
-        justify-content: space-between;
-        text-align: left;
-        cursor: pointer;
-    }
     .subtitle{
         margin-bottom: 0.5em;
     }
     .actions {
         margin-left: 0.2em;
+        z-index: 2;
     }
     p{
         margin: 0;
@@ -102,4 +92,46 @@
         margin: 0;
         font-weight: 1;
     }
+
+    .waiting::before{
+        content: '';
+        position: absolute;
+        background: linear-gradient(var(--second-color), var(--first-color));
+        width: 100%;
+        height: 60%;
+        animation: rotate 3s linear infinite;
+    }
+
+    .waiting::after{
+        content: '';
+        position: absolute;
+        background: var(--second-color);
+        inset: 2px;
+        border-radius: 0.2em;
+    }
+
+    .unselected{
+        background-color: var(--third-color);
+        background: fixed;
+        position: relative;
+        margin: 0.2em;
+        padding-left: 0.3em;
+        padding-bottom: 0.3em;
+        border-radius: 0.2em;
+        display: flex;
+        justify-content: space-between;
+        text-align: left;
+        cursor: pointer;
+        overflow: hidden;
+    }
+
+    /* Définition de l'animation */
+    @keyframes rotate {
+        from {
+            transform: rotate(0deg); /* Début de la rotation */
+        }
+        to {
+            transform: rotate(360deg); /* Fin de la rotation */
+        }
+    }
 </style>

frontend/src/components/Settings/InputsOutputsContent.svelte

@@ -133,7 +133,7 @@
             {#if savedPeripheralNumber > 0}    
                 {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                     {#if peripheral.isSaved}
-                        <DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
+                        <DeviceCard waiting on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
                         disconnected={!peripheral.isDetected} title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
                     {/if}
                 {/each}