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}>
-          <APSettingsForm
-            apSettings={data}
-            onSubmit={saveData}
-            onReset={loadData}
-            handleValueChange={handleValueChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <APSettingsForm
+              apSettings={data}
+              onSubmit={saveData}
+              onReset={loadData}
+              handleValueChange={handleValueChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/APStatus.js

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

interface/src/containers/ManageUsers.js

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

interface/src/containers/NTPSettings.js

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

interface/src/containers/NTPStatus.js

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

interface/src/containers/OTASettings.js

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

interface/src/containers/SecuritySettings.js

@@ -19,14 +19,16 @@ class SecuritySettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <SecuritySettingsForm
-            securitySettings={data}
-            onSubmit={saveData}
-            onReset={loadData}
-            handleValueChange={handleValueChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <SecuritySettingsForm
+              securitySettings={data}
+              onSubmit={saveData}
+              onReset={loadData}
+              handleValueChange={handleValueChange}
+            />
+          }
+        />
       </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}>
-          {this.renderNTPStatus(data, classes)}
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={
+            () => this.renderSystemStatus(data, classes)
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/WiFiSettings.js

@@ -42,17 +42,19 @@ class WiFiSettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <WiFiSettingsForm
-            wifiSettings={data}
-            selectedNetwork={selectedNetwork}
-            deselectNetwork={deselectNetwork}
-            onSubmit={saveData}
-            onReset={this.deselectNetworkAndLoadData}
-            handleValueChange={handleValueChange}
-            handleCheckboxChange={handleCheckboxChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <WiFiSettingsForm
+              wifiSettings={data}
+              selectedNetwork={selectedNetwork}
+              deselectNetwork={deselectNetwork}
+              onSubmit={saveData}
+              onReset={this.deselectNetworkAndLoadData}
+              handleValueChange={handleValueChange}
+              handleCheckboxChange={handleCheckboxChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }

interface/src/containers/WiFiStatus.js

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

interface/src/project/DemoController.js

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