@silexlabs/silex 3.2.0 → 3.2.1-0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.2.0",
+  "version": "3.2.1-0",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",

package/src/css/loader.scss

@@ -9,4 +9,44 @@
   align-items: center;
   background-color: variables.$primaryColor;
   z-index: variables.$z-loader;
+  opacity: 1;
+  font-size: 1.25rem;
+  letter-spacing: 0.025em;
+  .silex-loader__text {
+    min-width: 0;
+    transition: min-width 0.3s ease;
+    progress.silex-loader__progress {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+      background-color: variables.$secondaryColor;
+      border-radius: 0.125rem;
+      transform: translateY(-5px);
+      transition: all 0.3s 0.3s ease;
+      &::-webkit-progress-bar {
+        background-color: variables.$primaryColor;
+        border-radius: 0.125rem;
+      }
+      &::-webkit-progress-value {
+        background-color: variables.$secondaryColor;
+        border-radius: 0.125rem;
+      }
+      &::-moz-progress-bar {
+        background-color: variables.$primaryColor;
+        border-radius: 0.125rem;
+      }
+    }
+  }
+  &.silex-loader--active {
+    .silex-loader__text {
+      min-width: 250px;
+      .silex-loader__progress {
+        opacity: 1;
+        transform: translateY(10px);
+        width: 200px;
+        height: 0.25rem;
+      }
+    }
+  }
 }

package/src/html/index.pug

@@ -15,14 +15,15 @@ html(lang="en", translate="no")
           font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
         }
         .silex-loader {
-          display: none;
+          opacity: 0;
+          transition: opacity 0.25s 0.25s ease-in-out;
         }
 
     block head-end
 
   body.silex-loading
     .silex-loader.silex-dialog.
-      Loading...
+      Loading
 
     block includes
       include ./templates/includes.pug

package/src/ts/client/grapesjs/storage.ts

@@ -22,9 +22,30 @@ import { addTempDataToAssetUrl, addTempDataToStyles, removeTempDataFromAssetUrl,
 import { PublicationStatus, PublishableEditor } from './PublicationManager'
 import { ClientEvent } from '../events'
 import { ProjectData } from 'grapesjs'
+import { html, render, TemplateResult } from 'lit-html'
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
 
 export const cmdPauseAutoSave = 'pause-auto-save'
 
+const loader = document.querySelector('.silex-loader') as HTMLDivElement
+if (!loader) {
+  throw new Error('No loader found in the DOM')
+}
+loader.innerHTML = ''
+render(getLoaderHtml('Loading', 0, 0), loader)
+setTimeout(() => loader.classList.add('silex-loader--active'))
+
+function getLoaderHtml(text: string, current: number, total: number): TemplateResult {
+  return html`
+    <div class="silex-loader__text">
+      <div>${ unsafeHTML(text) }</div>
+      <progress
+        class="silex-loader__progress"
+        max="${total}" value="${current}"></progress>
+    </div>
+  `
+}
+
 // Wait for the next frame to avoid blocking the main thread
 function nextFrame(): Promise<void> {
   const fn = window.requestIdleCallback ?? window.requestAnimationFrame
@@ -199,9 +220,11 @@ export const storagePlugin = (editor: PublishableEditor) => {
 
 async function progressiveLoadPages(editor: PublishableEditor, data: ProjectData) {
   editor.Pages.getAll().forEach(page => editor.Pages.remove(page))
+  const max = data.pages.length + 2
   let i = 0
   for (const page of data.pages) {
-    document.querySelector('.silex-loader').innerHTML = `Loading page ${++i} / ${data.pages.length}`
+    render(getLoaderHtml(`Loading page <strong>${++i}</strong> / ${data.pages.length}`, i, max), loader)
+    //await new Promise(resolve => setTimeout(resolve, 1000 * 60 * 1000))
     await nextFrame()
     const newPage = editor.Pages.add({
       ...page,
@@ -209,7 +232,7 @@ async function progressiveLoadPages(editor: PublishableEditor, data: ProjectData
   }
 
   // Charger les styles, assets, etc. après les pages
-  document.querySelector('.silex-loader').innerHTML = 'Loading styles and assets'
+  render(getLoaderHtml('Loading styles and assets', data.pages.length + 1, max), loader)
   if (data.styles) editor.setStyle(data.styles)
   if (data.assets) editor.AssetManager.add(data.assets)