🎉 Add loader to workspace.

frontend/resources/locales.json

@@ -922,6 +922,7 @@
     },
     "unused" : true
   },
+
   "workspace.options.font-options.decoration": "Decoration",
   "workspace.options.font-options.none": "None",
   "workspace.options.font-options.underline": "Underline",

frontend/resources/styles/main/partials/workspace.scss

@@ -46,6 +46,17 @@
   }
 }
 
+.workspace-loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+
+  svg#loader-pencil {
+    fill: $color-gray-50;
+  }
+}
+
 .workspace-content {
   background-color: $color-canvas;
   display: flex;

frontend/src/uxbox/builtins/icons.cljs

@@ -7,7 +7,7 @@
 
 (ns uxbox.builtins.icons
   (:require-macros [uxbox.builtins.icons :refer [icon-xref]])
-  (:require [rumext.alpha :as mf :refer-macros [html]]))
+  (:require [rumext.alpha :as mf]))
 
 (def action (icon-xref :action))
 (def actions (icon-xref :actions))
@@ -108,7 +108,7 @@
 (def recent (icon-xref :recent))
 
 (def loader-pencil
-  (html
+  (mf/html
    [:svg
     {:viewBox "0 0 677.34762 182.15429"
      :height "182"

frontend/src/uxbox/main/ui/workspace.cljs

@@ -85,6 +85,11 @@
                            :file file
                            :layout layout}]))
 
+(mf/defc workspace-loader
+  []
+  [:div.workspace-loader
+   i/loader-pencil])
+
 (mf/defc workspace
   [{:keys [project-id file-id page-id] :as props}]
   (mf/use-effect #(st/emit! dw/initialize-layout))
@@ -107,9 +112,10 @@
      [:& messages]
      [:& context-menu]
 
-     (when (and (and file project)
+     (if (and (and file project)
-                (:initialized file))
+              (:initialized file))
        [:& workspace-page {:file file
                            :project project
                            :layout layout
-                           :page-id page-id}])]))
+                           :page-id page-id}]
+       [:& workspace-loader])]))