use render callbacks for loading notification

interface/src/components/LoadingNotification.js

@@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function LoadingNotification(props) {
   const classes = useStyles();
-  const { fetched, errorMessage, onReset, children } = props;
+  const { fetched, errorMessage, onReset, render } = props;
   return (
     <div>
       {
@@ -37,7 +37,7 @@ export default function LoadingNotification(props) {
               </Button>
             </div>
             :
-            children
+            render()
           :
           <div className={classes.loadingSettings}>
             <LinearProgress className={classes.loadingSettingsDetails} />
@@ -53,5 +53,6 @@ export default function LoadingNotification(props) {
 LoadingNotification.propTypes = {
   fetched: PropTypes.bool.isRequired,
   onReset: PropTypes.func.isRequired,
-  errorMessage: PropTypes.string
+  errorMessage: PropTypes.string,
+  render: PropTypes.func.isRequired
 };

interface/src/containers/APSettings.js

@@ -19,14 +19,16 @@ class APSettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
+          render={() =>
             <APSettingsForm
               apSettings={data}
               onSubmit={saveData}
               onReset={loadData}
               handleValueChange={handleValueChange}
             />
-        </LoadingNotification>
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/APStatus.js

@@ -107,9 +107,11 @@ class APStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
-          {this.renderAPStatus(data, classes)}
+          render={
-        </LoadingNotification>
+            () => this.renderAPStatus(data, classes)
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/ManageUsers.js

@@ -19,7 +19,8 @@ class ManageUsers extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
+          render={() =>
             <ManageUsersForm
               userData={data}
               onSubmit={saveData}
@@ -27,7 +28,8 @@ class ManageUsers extends Component {
               setData={setData}
               handleValueChange={handleValueChange}
             />
-        </LoadingNotification>
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/NTPSettings.js

@@ -19,14 +19,16 @@ class NTPSettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
+          render={() =>
             <NTPSettingsForm
               ntpSettings={data}
               onSubmit={saveData}
               onReset={loadData}
               handleValueChange={handleValueChange}
             />
-        </LoadingNotification>
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/NTPStatus.js

@@ -132,9 +132,11 @@ class NTPStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
-          {this.renderNTPStatus(data, classes)}
+          render={
-        </LoadingNotification>
+            () => this.renderNTPStatus(data, classes)
+          }
+        />
       </SectionContent>
     );
   }

interface/src/containers/OTASettings.js

@@ -19,7 +19,8 @@ class OTASettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
+          render={() =>
             <OTASettingsForm
               otaSettings={data}
               onSubmit={saveData}
@@ -27,7 +28,8 @@ class OTASettings extends Component {
               handleValueChange={handleValueChange}
               handleCheckboxChange={handleCheckboxChange}
             />
-        </LoadingNotification>
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/SecuritySettings.js

@@ -19,14 +19,16 @@ class SecuritySettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
+          render={() =>
             <SecuritySettingsForm
               securitySettings={data}
               onSubmit={saveData}
               onReset={loadData}
               handleValueChange={handleValueChange}
             />
-        </LoadingNotification>
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/SystemStatus.js

@@ -84,7 +84,7 @@ class SystemStatus extends Component {
     );
   }
 
-  renderNTPStatus(data, classes) {
+  renderSystemStatus(data, classes) {
     return (
       <div>
         <List>
@@ -104,9 +104,11 @@ class SystemStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
-          {this.renderNTPStatus(data, classes)}
+          render={
-        </LoadingNotification>
+            () => this.renderSystemStatus(data, classes)
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/WiFiSettings.js

@@ -42,7 +42,8 @@ class WiFiSettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
+          render={() =>
             <WiFiSettingsForm
               wifiSettings={data}
               selectedNetwork={selectedNetwork}
@@ -52,7 +53,8 @@ class WiFiSettings extends Component {
               handleValueChange={handleValueChange}
               handleCheckboxChange={handleCheckboxChange}
             />
-        </LoadingNotification>
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/WiFiStatus.js

@@ -144,9 +144,11 @@ class WiFiStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
-          {this.renderWiFiStatus(data, classes)}
+          render={
-        </LoadingNotification>
+            () => this.renderWiFiStatus(data, classes)
+          }
+        />
       </SectionContent>
     );
   }

interface/src/project/DemoController.js

@@ -25,14 +25,16 @@ class DemoController extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
+          errorMessage={errorMessage}
+          render={() =>
             <DemoControllerForm
               demoSettings={data}
               onReset={loadData}
               onSubmit={saveData}
               handleValueChange={handleValueChange}
             />
-        </LoadingNotification>
+          }
+        />
       </SectionContent>
     )
   }
@@ -43,7 +45,7 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
   },
-  blinkSpeedLabel:{
+  blinkSpeedLabel: {
     marginBottom: theme.spacing(5),
   }
 }));