Cleanup 🧹

Author: Ehevi

app/public/components/messagePanel/reasons.js

@@ -14,6 +14,7 @@
 
 import { h } from '/js/src/index.js';
 import messagePanel from './messagePanel.js';
+import spinner from '../common/spinner.js';
 
 const requestButton = (model) => h('button.btn.btn-primary.m3', {
     onclick: () => model.fetchedData.reqForData(true),
@@ -49,3 +50,14 @@ export const serviceUnavailable = (model) => messagePanel(
         id: model.dataAccess.serviceUnavailable.messageFieldId,
     }, ''),
 );
+
+export const waiting = () => {
+    const retryButton = h('button.btn.btn-primary.m3', { onclick: () => document.location.reload(true) }, 'Retry');
+    const loadingMessage = h('h3', 'Loading...');
+
+    return h('.panel.abs-center',
+        spinner(),
+        loadingMessage,
+        retryButton
+    );
+}

app/public/view.js

@@ -14,8 +14,7 @@
 
 import dataAccessPanel from './views/dataAccessPanel.js';
 import { switchCase } from '/js/src/index.js';
-import { serviceUnavailable, sessionError } from './components/messagePanel/reasons.js';
-import waitingPanel from './views/waitingPanel.js';
+import { serviceUnavailable, sessionError, waiting } from './components/messagePanel/reasons.js';
 
 export default function view(model) {
     const { state } = model.dataAccess;
@@ -24,5 +23,5 @@ export default function view(model) {
         serviceUnavailable: () => serviceUnavailable(model),
         sessionError: () => sessionError(model),
         dataAccess: () => dataAccessPanel(model),
-    }, () => waitingPanel())();
+    }, () => waiting())();
 }

app/public/views/userView/data/dataPanel.js

@@ -15,8 +15,7 @@
 import tablePanel from './table/tablePanel.js';
 import flagsPanel from '../../flags/overview/flagsPanel.js';
 import { default as runsPerDataPassPanel } from '../../runs/runsPerDataPass/overview/panel.js';
-import waitingPanel from '../../waitingPanel.js';
-import { failure, unknown } from '../../../components/messagePanel/reasons.js';
+import { failure, unknown, waiting } from '../../../components/messagePanel/reasons.js';
 import { RCT } from '../../../config.js';
 const { pageNames } = RCT;
 
@@ -32,7 +31,7 @@ export default function dataPanel(model, runs, detectors, flags) {
 
     return data ? data.match({
         NotAsked: () => unknown(model),
-        Loading: () => waitingPanel(),
+        Loading: () => waiting(),
         Success: () => {
             switch (page) {
                 case pageNames.flags: