feat(ui): added loading spinner

Author: mvegter

lib/public/components/common/spinner.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+
+/**
+ * Generic page loading placeholder.
+ *
+ * @param {number} size The size of the spinner.
+ * @return {vnode} The spinner.
+ */
+const spinner = (size = 10) => h('.w-100.flex-row.justify-center.items-center.absolute-fill', [
+    h('span.pageLoading', {
+        style: `font-size: ${size}em;`,
+    }, h('.atom-spinner', h('.spinner-inner', [
+        h('.spinner-line'),
+        h('.spinner-line'),
+        h('.spinner-line'),
+        h('.spinner-circle', h('div', '●')),
+    ]))),
+]);
+
+export default spinner;

lib/public/views/Logs/Details/index.js

@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 import { h } from '/js/src/index.js';
+import spinner from '../../../components/common/spinner.js';
 import PostBox from '../../../components/Post/index.js';
 
 /**
@@ -55,6 +56,8 @@ const logDetailScreen = (model) => {
                 onclick: () => model.router.go('?page=home'),
             }, 'Return to Overview'),
         ]);
+    } else {
+        return spinner();
     }
 };