Added loading phase, label changes for wifi scan.

public/locales/de/translation.json

@@ -150,7 +150,12 @@
 		"active": "Aktiven Scan aktivieren",
 		"channel": "Kanal",
 		"directions": "Starten Sie einen WLAN-Scan dieses Geräts, der ungefähr 25 Sekunden dauern sollte.",
-		"results": "Ergebnisse des WLAN-Scans"
+		"re_scan": "Erneut scannen",
+		"result_directions": "Bitte klicken Sie auf die Schaltfläche '$t(scan.re_scan)', wenn Sie einen Scan mit derselben Konfiguration wie beim letzten Scan durchführen möchten.",
+		"results": "Ergebnisse des WLAN-Scans",
+		"scan": "Scan",
+		"scanning": "Scannen... ",
+		"waiting_directions": "Bitte warten Sie auf das Scanergebnis. Dies kann bis zu 25 Sekunden dauern. Sie können den Vorgang später beenden und die Ergebnisse aus der Befehlstabelle anzeigen."
 	},
 	"statistics": {
 		"data": "Daten (KB)",

public/locales/en/translation.json

@@ -150,7 +150,12 @@
 		"active": "Enable active scan",
 		"channel": "Channel",
 		"directions": "Launch a wifi scan of this device, which should take approximately 25 seconds.",
-		"results": "Wifi Scan Results"
+		"re_scan": "Re-Scan",
+		"result_directions": "Please click the '$t(scan.re_scan)' button if you would like to do a scan with the same configuration as the last.",
+		"results": "Wifi Scan Results",
+		"scan": "Scan",
+		"scanning": "Scanning... ",
+		"waiting_directions": "Please wait for the scan result. This may take up to 25 seconds. You can exit and look at the results from the commands table later."
 	},
 	"statistics": {
 		"data": "Data (KB)",

public/locales/es/translation.json

@@ -150,7 +150,12 @@
 		"active": "Habilitar escaneo activo",
 		"channel": "Canal",
 		"directions": "Ejecute un escaneo wifi de este dispositivo, que debería tomar aproximadamente 25 segundos.",
-		"results": "Resultados de escaneo Wifi"
+		"re_scan": "Vuelva a escanear",
+		"result_directions": "Haga clic en el botón '$ t (scan.re_scan)' si desea realizar un escaneo con la misma configuración que el anterior.",
+		"results": "Resultados de escaneo Wifi",
+		"scan": "Escanear",
+		"scanning": "Exploración... ",
+		"waiting_directions": "Espere el resultado del escaneo. Esto puede tardar hasta 25 segundos. Puede salir y ver los resultados de la tabla de comandos más adelante."
 	},
 	"statistics": {
 		"data": "Datos (KB)",

public/locales/fr/translation.json

@@ -150,7 +150,12 @@
 		"active": "Activer l'analyse active",
 		"channel": "Canal",
 		"directions": "Lancez une analyse wifi de cet appareil, ce qui devrait prendre environ 25 secondes.",
-		"results": "Résultats de l'analyse Wi-Fi"
+		"re_scan": "Nouvelle analyse",
+		"result_directions": "Veuillez cliquer sur le bouton '$t(scan.re_scan)' si vous souhaitez effectuer un scan avec la même configuration que le précédent.",
+		"results": "Résultats de l'analyse Wi-Fi",
+		"scan": "Balayage",
+		"scanning": "Balayage... ",
+		"waiting_directions": "Veuillez attendre le résultat de l'analyse. Cela peut prendre jusqu'à 25 secondes. Vous pouvez quitter et consulter les résultats du tableau des commandes plus tard."
 	},
 	"statistics": {
 		"data": "Données (Ko)",

public/locales/pt/translation.json

@@ -150,7 +150,12 @@
 		"active": "Habilitar varredura ativa",
 		"channel": "Canal",
 		"directions": "Inicie uma verificação de wi-fi deste dispositivo, o que deve levar aproximadamente 25 segundos.",
-		"results": "Resultados da verificação de wi-fi"
+		"re_scan": "Verificar novamente",
+		"result_directions": "Clique no botão '$ t (scan.re_scan)' se desejar fazer uma varredura com a mesma configuração da anterior.",
+		"results": "Resultados da verificação de wi-fi",
+		"scan": "Varredura",
+		"scanning": "Scanning... ",
+		"waiting_directions": "Por favor, aguarde o resultado da verificação. Isso pode levar até 25 segundos. Você pode sair e ver os resultados da tabela de comandos mais tarde."
 	},
 	"statistics": {
 		"data": "Dados (KB)",

src/components/WifiScanModal/index.js

@@ -9,6 +9,7 @@ import {
   CForm,
   CSwitch,
   CCol,
+  CSpinner
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,6 +30,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
   const [waiting, setWaiting] = useState(false);
   const [choseVerbose, setVerbose] = useState(true);
   const [activeScan, setActiveScan] = useState(false);
+  const [hideOptions, setHideOptions] = useState(false);
   const [channelList, setChannelList] = useState([]);
   const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
 
@@ -47,6 +49,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
     setChannelList([]);
     setVerbose(true);
     setActiveScan(false);
+    setHideOptions(false);
   }, [show]);
 
   const parseThroughList = (scanList) => {
@@ -104,6 +107,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
 
         if (scanList) {
           setChannelList(parseThroughList(scanList));
+          setHideOptions(true);
           setHadSuccess(true);
         } else {
           setHadFailure(true);
@@ -124,6 +128,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
         <CModalTitle>{t('actions.wifi_scan')}</CModalTitle>
       </CModalHeader>
       <CModalBody>
+        <div hidden={hideOptions || waiting}>
           <h6>{t('scan.directions')}</h6>
           <CRow className={styles.spacedRow}>
             <CCol md="3">
@@ -157,14 +162,32 @@ const WifiScanModal = ({ show, toggleModal }) => {
               </CForm>
             </CCol>
           </CRow>
-        <div className={styles.spacedRow} hidden={!hadSuccess && !hadFailure}>
+        </div>
+        <div hidden={!waiting}>
+          <CRow>
+            <CCol>
+              <h6>{t('scan.waiting_directions')}</h6>
+            </CCol>
+          </CRow>
+          <CRow>
+            <CCol className={styles.centerDiv}>
+              <CSpinner />
+            </CCol>
+          </CRow>
+        </div>
+        <div hidden={!hadSuccess && !hadFailure}>
+          <CRow className={styles.bottomSpace}>
+            <CCol>
+              <h6>{t('scan.result_directions')}</h6>
+            </CCol>
+          </CRow>
           <WifiChannelTable channels={channelList} />
         </div>
       </CModalBody>
       <CModalFooter>
         <LoadingButton
-          label={t('common.start')}
+          label={(!hadSuccess && !hadFailure) ? t('scan.scan') : t('scan.re_scan')}
-          isLoadingLabel={t('common.loading_ellipsis')}
+          isLoadingLabel={t('scan.scanning')}
           isLoading={waiting}
           action={doAction}
           variant="outline"
@@ -172,7 +195,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
           disabled={waiting}
         />
         <CButton color="secondary" onClick={toggleModal}>
-          {t('common.cancel')}
+        {(!hadSuccess && !hadFailure && waiting) ? t('common.cancel') : t('common.close')}
         </CButton>
       </CModalFooter>
     </CModal>

src/components/WifiScanModal/index.module.scss

@@ -9,3 +9,14 @@
 .spacedSwitch {
   padding-left: 5%;
 }
+
+.bottomSpace {
+  margin-bottom: 20px;
+}
+
+.centerDiv {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+}