From 538c5f23d16120aa3a778a7e62d320c6103f135a Mon Sep 17 00:00:00 2001
From: Mickael Kerjean <mickael@kerjean.me>
Date: Tue, 16 Jun 2020 14:59:14 +1000
Subject: [PATCH] improve (admin): loading indicator

---
 client/pages/adminpage.js        | 25 ++++++++++++++++++-------
 client/pages/adminpage.scss      |  2 ++
 client/pages/adminpage/config.js | 12 +++++++++---
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/client/pages/adminpage.js b/client/pages/adminpage.js
index 9b08e58c..0a034176 100644
--- a/client/pages/adminpage.js
+++ b/client/pages/adminpage.js
@@ -53,19 +53,24 @@ export class AdminPage extends React.Component {
     constructor(props){
         super(props);
         this.state = {
-            isAdmin: null
+            isAdmin: null,
+            isSaving: false
         };
     }
 
+    isSaving(yesOrNo){
+        this.setState({isSaving: yesOrNo});
+    }
+
     render(){
         return (
             <div className="component_page_admin">
-              <SideMenu url={this.props.match.url}/>
+              <SideMenu url={this.props.match.url} isLoading={this.state.isSaving}/>
               <div className="page_container scroll-y">
                 <ReactCSSTransitionGroup key={window.location.pathname} transitionName="adminpage" transitionLeave={true} transitionEnter={true} transitionLeaveTimeout={15000} transitionEnterTimeout={20000} transitionAppear={true} transitionAppearTimeout={20000}>
                   <Switch>
                     <Route path={this.props.match.url + "/dashboard"} component={DashboardPage} />
-                    <Route path={this.props.match.url + "/configure"} component={ConfigPage} />
+                    <Route path={this.props.match.url + "/configure"} render={()=><ConfigPage isSaving={this.isSaving.bind(this)}/>} />
                     <Route path={this.props.match.url + "/activity"} component={LogPage} />
                     <Route path={this.props.match.url + "/plugins"} component={PluginPage} />
                     <Route path={this.props.match.url + "/support"} component={SupportPage} />
@@ -82,10 +87,16 @@ export class AdminPage extends React.Component {
 const SideMenu = (props) => {
     return (
         <div className="component_menu_sidebar no-select">
-          <NavLink to="/" className="header">
-            <Icon name="arrow_left" />
-            <img src="/assets/logo/android-chrome-512x512.png" />
-          </NavLink>
+          { props.isLoading ?
+            <div className="header">
+              <Icon name="arrow_left" style={{"opacity": 0}}/>
+              <Icon name="loading" />
+            </div> :
+            <NavLink to="/" className="header">
+              <Icon name="arrow_left" />
+              <img src="/assets/logo/android-chrome-512x512.png" />
+            </NavLink>
+          }
           <h2>{ t("Admin console") }</h2>
           <ul>
             <li>
diff --git a/client/pages/adminpage.scss b/client/pages/adminpage.scss
index eae5f7c2..5167c7fe 100644
--- a/client/pages/adminpage.scss
+++ b/client/pages/adminpage.scss
@@ -121,6 +121,8 @@
         }
     }
     .header{
+        display: block;
+        height: 40px;
         img{
             width: 40px;
             height: 40px;
diff --git a/client/pages/adminpage/config.js b/client/pages/adminpage/config.js
index cdb8da82..c3b78061 100644
--- a/client/pages/adminpage/config.js
+++ b/client/pages/adminpage/config.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { FormBuilder } from '../../components/';
 import { Config } from '../../model/';
-import { format }  from '../../helpers';
+import { format, notify }  from '../../helpers';
+import { t } from '../../locales/';
 
 export class ConfigPage extends React.Component {
     constructor(props){
@@ -36,8 +37,13 @@ export class ConfigPage extends React.Component {
 
     onChange(form){
         form.connections = window.CONFIG.connections;
-        Config.save(form);
-        this.setState({refresh: Math.random()});
+        this.props.isSaving(true);
+        Config.save(form, true, () => {
+            this.props.isSaving(false);
+        }, (err) => {
+            notify.send(err || t('Oops'), 'error');
+            this.props.isSaving(false);
+        });
     }
 
     render(){