feature: improve page loading + intl collator

src/components/hubl-status.js

@@ -3,8 +3,7 @@ import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';
 
 const HublStatus = widgetFactory(
   'hubl-status',
-  `<label>
+  `<label>\${label}</label>
-    <div>\${label}</div>
     <select
       data-holder
       name="\${name}">
@@ -14,8 +13,7 @@ const HublStatus = widgetFactory(
       <option
         value="Private"
         \${value=="Private" ? 'selected' : ''} data-trans="hublStatus.private">Privé</option>
-    </select>
+    </select>`,
-  </label>`,
   '',
   formWidget => {
     let select = formWidget.querySelector('select');

src/index.pug

@@ -38,8 +38,15 @@ html(lang="en")
 
     script(src="index.js" defer)
 
-  body.notLoggedIn.bg-color-grey(style='visibility:hidden;')
+  body.bg-color-grey
     if endpoints.get && endpoints.post
+      .notLoggedIn(style='visibility:hidden;')
+        sib-auth(style='display:none!important', auto-login)
+          sib-auth-provider(
+            data-authority=`${authority}`
+            data-id=`${authorityName || "authority"}`
+            data-client-name=`${clientName || "Hubl"}`
+          )
 
         include views/partials/notifications.pug
         include views/partials/widgets.pug
@@ -124,6 +131,13 @@ html(lang="en")
               hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
               include views/page-job-offers.pug
 
+      .loggedIn(style='position:absolute;top:calc(50% - 10px);left:calc(50% - 40px);')
+        div.loader
+          div
+          div
+          div
+          div
+
       if analytics
         each provider in analytics
           if provider.type && provider.url && provider.url

src/scripts/intl.js

@@ -187,13 +187,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Detect the lang & initialize, based on the browser or "language" item from localstorage
   jsI18n.detectLanguage();
+  let timer;
   (new MutationObserver((mutations) => {
     mutations.forEach(mutation => {
       if(mutation.target.attributes["data-trans"] != null) {
         // Render the target of the mutation instantly
         jsI18n.processNode(mutation.target);
         // Then wait one arbitrary second to re-render the whole document in case a widget re-rendered
-        setTimeout(() => jsI18n.processNode(document.querySelector('body')), 1000);
+        clearTimeout(timer);
+        timer = setTimeout(() => jsI18n.processNode(document.querySelector('body')), 500);
       }
     });
   }).observe(document.body, {

src/scripts/login-element-visibility.js

@@ -7,6 +7,9 @@ document.addEventListener("DOMContentLoaded", function () {
         document
           .querySelectorAll(".notLoggedIn")
           .forEach(el => (el.style.visibility = "visible"));
+          document
+            .querySelectorAll(".loggedIn")
+            .forEach(el => (el.style.display = "none"));
       }
     });
 });

src/views/partials/admin/page-admin-projects.pug

@@ -127,7 +127,8 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
         id="hubl_project_is_admin"
         fields="is_admin"
         value-is_admin='true'
-        widget-is_admin='solid-form-hidden'
+        widget-is_admin='solid-form-checkbox'
+        hidden
       )
 
       solid-widget(name='hubl-project-admins')

src/views/partials/header.pug

@@ -123,11 +123,4 @@ div
 
       button.segment.lg-hidden.icon-menu#toggleMainMenu
  
-      sib-auth(style='display:none!important', auto-login)
-        sib-auth-provider(
-          data-authority=`${authority}`
-          data-id=`${authorityName || "authority"}`
-          data-client-name=`${clientName || "Hubl"}`
-        )
-