Merge pull request #4904 from penpot/eva-substitude-loader-component

♻️  Replacing the old Pencil loader with the new Loader component

frontend/.storybook/preview-head.html

@@ -3,4 +3,8 @@
   body {
     overflow-y: scroll;
   }
+
+  #storybook-root {
+    height: 100%;
+  }
 </style>

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -659,22 +659,6 @@
   color: var(--modal-button-foreground-color-error);
 }
 
-.loader-base {
-  @include flexCenter;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  z-index: $z-index-alert;
-  background-color: var(--loader-background);
-  :global(svg#loader-pencil) {
-    height: $s-100;
-    width: $s-100;
-    animation: loaderColor 5s infinite ease;
-    fill: var(--icon-foreground);
-  }
-}
 // UI ELEMENTS
 .asset-element {
   @include bodySmallTypography;

frontend/resources/styles/main-default.scss

@@ -29,11 +29,3 @@
 // TODO: remove this stylesheet once the new text editor is in place
 //       https: //tree.taiga.io/project/penpot/us/8165
 @import "main/partials/texts";
-
-//#################################################
-// Partials
-//#################################################
-
-// TODO: encapsulate pencil loader into its own component
-//       https: //tree.taiga.io/project/penpot/task/8217
-@import "main/partials/loader";

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

@@ -1,9 +0,0 @@
-// btn pencil loader
-svg#loader-pencil {
-  fill: var(--color-accent-tertiary);
-  width: 60px;
-}
-
-#loader-line {
-  animation: linePencil 0.8s infinite linear;
-}

frontend/src/app/main/ui/auth/verify_token.cljs

@@ -5,13 +5,12 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.auth.verify-token
-  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.data.messages :as msg]
    [app.main.data.users :as du]
    [app.main.repo :as rp]
    [app.main.store :as st]
-   [app.main.ui.icons :as i]
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.static :as static]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -95,5 +94,5 @@
 
     (if @bad-token
       [:> static/invalid-token {}]
-      [:div {:class (stl/css :verify-token)}
+      [:> loader*  {:title (tr "labels.loading")
-       i/loader-pencil])))
+                    :overlay true}])))

frontend/src/app/main/ui/auth/verify_token.scss

@@ -1,11 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@use "./common.scss";
-
-.verify-token {
-  @extend .loader-base;
-}

frontend/src/app/main/ui/dashboard.scss

@@ -13,11 +13,6 @@
   grid-template-columns: $s-40 $s-256 1fr;
   grid-template-rows: $s-52 1fr;
   height: 100vh;
-
-  :global(svg#loader-pencil) {
-    fill: $df-secondary;
-    width: $s-32;
-  }
 }
 
 .dashboard-content {

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -26,6 +26,7 @@
    [app.main.ui.dashboard.import :refer [use-import-file]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
    [app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]]
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.worker :as wrk]
@@ -96,7 +97,9 @@
                 :src (cf/resolve-media thumbnail-id)
                 :loading "lazy"
                 :decoding "async"}]
-         i/loader-pencil))]))
+         [:> loader* {:class (stl/css :grid-loader)
+                      :overlay true
+                      :title (tr "labels.loading")}]))]))
 
 ;; --- Grid Item Library
 
@@ -114,7 +117,9 @@
 
   [:div {:class (stl/css :grid-item-th :library)}
    (if (nil? file)
-     i/loader-pencil
+     [:> loader* {:class (stl/css :grid-loader)
+                  :overlay true
+                  :title (tr "labels.loading")}]
      (let [summary (:library-summary file)
            components (:components summary)
            colors (:colors summary)
@@ -459,7 +464,6 @@
            :on-drag-leave on-drag-leave
            :on-drop on-drop
            :ref node-ref}
-
      (cond
        (nil? files)
        [:& loading-placeholder]

frontend/src/app/main/ui/dashboard/grid.scss

@@ -278,16 +278,6 @@ $thumbnail-default-height: $s-168; // Default width
     height: auto;
     width: 100%;
   }
-
-  svg {
-    height: 100%;
-    width: 100%;
-  }
-
-  :global(svg#loader-pencil) {
-    stroke: $db-quaternary;
-    width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
-  }
 }
 
 // LIBRARY VIEW
@@ -381,3 +371,7 @@ $thumbnail-default-height: $s-168; // Default width
   grid-template-columns: auto 1fr;
   gap: $s-8;
 }
+
+.grid-loader {
+  --icon-width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
+}

frontend/src/app/main/ui/dashboard/import.cljs

@@ -18,6 +18,7 @@
    [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.icons :as i]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.main.worker :as uw]
@@ -266,14 +267,17 @@
                    :editable (and ready? (not editing?)))}
 
      [:div {:class (stl/css :file-name)}
-      [:div {:class (stl/css-case :file-icon true
+      (if loading?
-                                  :icon-fill ready?)}
+        [:> loader*  {:width 16
-       (cond loading?       i/loader-pencil
+                      :title (tr "labels.loading")}]
-             ready?         i/logo-icon
+        [:div {:class (stl/css-case :file-icon true
-             import-warn?   i/msg-warning
+                                    :icon-fill ready?)}
-             import-error?  i/close
+         (cond ready?         i/logo-icon
-             import-finish? i/tick
+               import-warn?   i/msg-warning
-             analyze-error? i/close)]
+               import-error?  i/close
+               import-finish? i/tick
+               analyze-error? i/close)])
+
 
       (if editing?
         [:div {:class (stl/css :file-name-edit)}

frontend/src/app/main/ui/dashboard/import.scss

@@ -143,13 +143,6 @@
   &.loading {
     .file-name {
       color: var(--modal-text-foreground-color);
-      .file-icon {
-        :global(#loader-pencil) {
-          color: var(--modal-text-foreground-color);
-          stroke: var(--modal-text-foreground-color);
-          fill: var(--modal-text-foreground-color);
-        }
-      }
     }
   }
   &.warning {

frontend/src/app/main/ui/dashboard/placeholder.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.dashboard.placeholder
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -40,6 +41,7 @@
 
 (mf/defc loading-placeholder
   []
-  [:div {:class (stl/css :grid-empty-placeholder :loader)}
+  [:> loader*  {:width 32
-   [:div {:class (stl/css :icon)} i/loader-pencil]
+                :title (tr "labels.loading")
-   [:div {:class (stl/css :text)} (tr "dashboard.loading-files")]])
+                :class (stl/css :placeholder-loader)}
+   [:span {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]])

frontend/src/app/main/ui/dashboard/placeholder.scss

@@ -12,21 +12,6 @@
   display: grid;
   padding: $s-12 0;
 
-  &.loader {
-    justify-items: center;
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    svg {
-      width: $s-64;
-      height: $s-64;
-      fill: $df-secondary;
-    }
-  }
-
   &.libs {
     background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
     background-position:
@@ -90,3 +75,17 @@
     font-size: $fs-16;
   }
 }
+
+.placeholder-loader {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: var(--sp-xxxl);
+  margin: var(--sp-xxxl) 0 var(--sp-m) 0;
+}
+
+.placeholder-text {
+  color: $df-secondary;
+  font-size: $fs-16;
+  text-align: center;
+}

frontend/src/app/main/ui/ds/product/loader.cljs

@@ -9,25 +9,20 @@
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
   (:require
+   [app.common.math :as mth]
    [rumext.v2 :as mf]))
 
-(mf/defc loader*
+(mf/defc loader-icon*
-  {::mf/props :obj}
+  {::mf/props :obj
-  [{:keys [class width height title] :rest props}]
+   ::mf/private true}
-  (let [class (dm/str (or class "") " " (stl/css :loader))
+  [{:keys [width height title] :rest props}]
-        both-provided (and width height)
+  (let [class (stl/css :loader)
-        neither-provided (and (nil? width) (nil? height))
         props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429"
                                       :role "status"
-                                      :width (or width "100px")
+                                      :width width
-                                      :height (or height "27px")
+                                      :height height
                                       :class class})]
-    (assert (or both-provided neither-provided)
+
-            (dm/str "Invalid props: both 'width' and 'height' must be provided or neither. "
-                    "Received width: " width ", height: " height))
-    ;; TODO: Add a translated label insted of the title prop.    
-    (assert title
-            (dm/str "You must provide an accesible name for the component"))
     [:> "svg" props
      [:title title]
      [:g
@@ -36,3 +31,22 @@
       [:path {:class (stl/css :loader-line)
               :d
               "M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}]]]))
+
+(mf/defc loader*
+  {::mf/props :obj}
+  [{:keys [class width height title overlay children] :rest props}]
+
+  (let [w (or width (when (some? height) (mth/ceil (* height (/ 100 27)))) 100)
+        h (or height (when (some? width) (mth/ceil (* width (/ 27 100)))) 27)
+        class (dm/str (or class "") " " (stl/css-case :wrapper true
+                                                      :wrapper-overlay overlay))
+        props (mf/spread-props props {:class class})]
+
+    (assert title
+            (dm/str "You must provide an accesible name for the component"))
+
+    [:> "div" props
+     [:> loader-icon* {:title title
+                       :width w
+                       :height h}]
+     children]))

frontend/src/app/main/ui/ds/product/loader.scss

@@ -14,12 +14,30 @@
   }
 }
 
+.wrapper {
+  --loader-color-foreground: var(--color-foreground-secondary);
+  --loader-icon-width: unset;
+
+  display: inline-flex;
+  column-gap: var(--sp-s);
+  align-items: center;
+
+  color: var(--loader-color-foreground);
+}
+
+.wrapper-overlay {
+  display: grid;
+  place-content: center;
+  height: 100%;
+  width: 100%;
+  row-gap: var(--sp-s);
+}
+
 .loader {
-  --color-loader-foreground: var(--color-foreground-secondary);
+  fill: currentColor;
-  fill: var(--color-loader-foreground);
+  width: var(--icon-width);
 }
 
 .loader-line {
-  fill: var(--color-loader-foreground);
   animation: line-pencil 0.8s infinite linear;
 }

frontend/src/app/main/ui/ds/product/loader.stories.jsx

@@ -5,9 +5,40 @@ const { Loader } = Components;
 
 export default {
   title: "Product/Loader",
-  component: Components.Loader,
+  component: Loader,
+  args: {
+    title: "Loading…",
+    overlay: false,
+  },
+  argTypes: {
+    width: { control: "number" },
+    height: { control: "number" },
+    overlay: { control: "boolean" },
+    children: { control: "text" },
+  },
+  render: ({ ...args }) => <Loader {...args} />,
 };
 
-export const Default = {
+export const Default = {};
-  render: () => <Loader title="Loading" />,
+
+export const WithContent = {
+  args: {
+    children: "Lorem ipsum",
+  },
+};
+
+export const Overlay = {
+  args: {
+    overlay: true,
+    children: "Lorem ipsum",
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Inline = {
+  args: {
+    children: "Lorem ipsum",
+  },
 };

frontend/src/app/main/ui/export.cljs

@@ -15,6 +15,7 @@
    [app.main.data.modal :as modal]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.shapes :refer [shape-wrapper]]
    [app.main.worker :as uw]
@@ -317,10 +318,12 @@
                               :error    (:export-error? file))}
 
    [:div {:class (stl/css :file-name)}
-    [:span {:class (stl/css :file-icon)}
+    (if (:loading? file)
-     (cond (:export-success? file) i/tick
+      [:> loader*  {:width 16
-           (:export-error? file)   i/close
+                    :title (tr "labels.loading")}]
-           (:loading? file)        i/loader-pencil)]
+      [:span {:class (stl/css :file-icon)}
+       (cond (:export-success? file) i/tick
+             (:export-error? file)   i/close)])
 
     [:div {:class (stl/css :file-name-label)}
      (:name file)]]])

frontend/src/app/main/ui/export.scss

@@ -309,11 +309,6 @@
   &.loading {
     .file-name {
       color: var(--modal-text-foreground-color);
-      .file-icon svg:global(#loader-pencil) {
-        color: var(--modal-text-foreground-color);
-        stroke: var(--modal-text-foreground-color);
-        fill: var(--modal-text-foreground-color);
-      }
     }
   }
   &.error {

frontend/src/app/main/ui/icons.cljs

@@ -9,8 +9,7 @@
   (:require-macros [app.main.ui.icons :refer [icon-xref collect-icons]])
   (:require
    [app.common.data :as d]
-   [cuerdas.core :as str]
+   [cuerdas.core :as str]))
-   [rumext.v2 :as mf]))
 
 ;; Keep the list of icons sorted
 (def ^:icon icon-verify (icon-xref :icon-verify))
@@ -263,23 +262,6 @@
 (def ^:icon view-as-list (icon-xref :view-as-list))
 (def ^:icon wrap (icon-xref :wrap))
 
-(def ^:icon loader-pencil
-  (mf/html
-   [:svg
-    {:viewBox "0 0 677.34762 182.15429"
-     :height "182"
-     :width "667"
-     :id "loader-pencil"}
-    [:g
-     [:path
-      {:id "body-body"
-       :d
-       "M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z"}]
-     [:path
-      {:id "loader-line"
-       :d
-       "M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}]]]))
-
 (def default
   "A collection of all icons"
   (collect-icons))

frontend/src/app/main/ui/loader.cljs

@@ -1,20 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.loader
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.main.store :as st]
-   [app.main.ui.icons :as i]
-   [rumext.v2 :as mf]))
-
-;; --- Component
-
-(mf/defc loader
-  []
-  (when (mf/deref st/loader)
-    [:div {:class (stl/css :loader-content)}
-     i/loader-pencil]))

frontend/src/app/main/ui/loader.scss

@@ -1,11 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@import "refactor/common-refactor.scss";
-
-.loader-content {
-  @extend .loader-base;
-}

frontend/src/app/main/ui/viewer.cljs

@@ -22,6 +22,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.comments :refer [comments-layer comments-sidebar]]
@@ -628,11 +629,10 @@
       (st/emit! (dv/initialize params))
       (fn []
         (st/emit! (dv/finalize params)))))
-
   (if-let [data (mf/deref refs/viewer-data)]
     (let [props (obj/merge props #js {:data data :key (dm/str file-id)})]
       [:> viewer-content props])
 
-    [:div {:class (stl/css :loader-content)}
+    [:> loader*  {:title (tr "labels.loading")
-     i/loader-pencil]))
+                  :overlay true}]))
 

frontend/src/app/main/ui/viewer.scss

@@ -189,10 +189,6 @@
   }
 }
 
-.loader-content {
-  @extend .loader-base;
-}
-
 /** FULLSCREEN */
 [data-fullscreen="true"] .viewer-bottom {
   transform: translateY($s-40);

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

@@ -17,9 +17,9 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.hooks.resize :refer [use-resize-observer]]
-   [app.main.ui.icons :as i]
    [app.main.ui.workspace.colorpicker]
    [app.main.ui.workspace.context-menu :refer [context-menu]]
    [app.main.ui.workspace.coordinates :as coordinates]
@@ -124,8 +124,9 @@
 
 (mf/defc workspace-loader
   []
-  [:div {:class (stl/css :workspace-loader)}
+  [:> loader*  {:title (tr "labels.loading")
-   i/loader-pencil])
+                :class (stl/css :workspace-loader)
+                :overlay true}])
 
 (mf/defc workspace-page
   {::mf/wrap-props false}
@@ -147,7 +148,6 @@
       (fn []
         (when (some? page-id)
           (st/emit! (dw/finalize-page page-id)))))
-
     (if ^boolean page-ready?
       [:& workspace-content {:page-id page-id
                              :file file

frontend/src/app/main/ui/workspace.scss

@@ -18,15 +18,10 @@
   grid-template-rows: 1fr;
   grid-template-columns: auto 1fr auto;
   overflow: hidden;
+}
 
-  .workspace-loader {
+.workspace-loader {
-    @include flexCenter;
+  grid-area: viewport;
-    grid-area: viewport;
-    background-color: var(--loader-background);
-    :global(svg#loader-pencil) {
-      fill: var(--icon-foreground);
-    }
-  }
 }
 
 .workspace-content {

frontend/translations/en.po

@@ -1713,6 +1713,9 @@ msgstr "Upload custom fonts"
 msgid "labels.uploading"
 msgstr "Uploading…"
 
+msgid "labels.loading"
+msgstr "Loading…"
+
 msgid "labels.view-only"
 msgstr "View only"
 

frontend/translations/es.po

@@ -1770,6 +1770,9 @@ msgstr "Cargar fuente"
 msgid "labels.uploading"
 msgstr "Subiendo…"
 
+msgid "labels.loading"
+msgstr "Cargando…"
+
 msgid "labels.view-only"
 msgstr "Solo lectura"