diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html
index f4c3f9096..e943079ee 100644
--- a/frontend/.storybook/preview-head.html
+++ b/frontend/.storybook/preview-head.html
@@ -3,4 +3,8 @@
body {
overflow-y: scroll;
}
+
+ #storybook-root {
+ height: 100%;
+ }
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index e5550d943..b5f486577 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -97,6 +97,7 @@
:loading "lazy"
:decoding "async"}]
[:> loader* {:class (stl/css :grid-loader)
+ :overlay true
:title (tr "labels.loading")}]))]))
;; --- Grid Item Library
@@ -116,6 +117,7 @@
[:div {:class (stl/css :grid-item-th :library)}
(if (nil? file)
[:> loader* {:class (stl/css :grid-loader)
+ :overlay true
:title (tr "labels.loading")}]
(let [summary (:library-summary file)
components (:components summary)
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 996957ae1..61cb811dc 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -373,7 +373,5 @@ $thumbnail-default-height: $s-168; // Default width
}
.grid-loader {
- width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
- height: 100%;
- align-self: center;
+ --icon-width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
}
diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs
index 79aca61cc..bc72e3f29 100644
--- a/frontend/src/app/main/ui/dashboard/import.cljs
+++ b/frontend/src/app/main/ui/dashboard/import.cljs
@@ -268,8 +268,7 @@
[:div {:class (stl/css :file-name)}
(if loading?
- [:> loader* {:width "16px"
- :height "24px"
+ [:> loader* {:width 16
:title (tr "labels.loading")}]
[:div {:class (stl/css-case :file-icon true
:icon-fill ready?)}
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs
index ee87f4f5d..261fe3c4f 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.cljs
+++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs
@@ -41,9 +41,7 @@
(mf/defc loading-placeholder
[]
- [:> loader* {:width "64px"
- :height "64px"
+ [:> loader* {:width 32
:title (tr "labels.loading")
- :overlay true
:class (stl/css :placeholder-loader)}
- [:div {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]])
+ [:span {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]])
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 6aab79276..f052481f3 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -76,22 +76,16 @@
}
}
-.loader-wrapper {
- display: grid;
- justify-items: center;
- height: 100%;
- width: 100%;
- padding: $s-12 0;
- border-radius: $br-12;
-}
-
.placeholder-loader {
- align-self: end;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ row-gap: var(--sp-xxxl);
+ margin: var(--sp-xxxl) 0 var(--sp-m) 0;
}
.placeholder-text {
- margin-top: $s-12;
color: $df-secondary;
font-size: $fs-16;
- align-self: start;
+ text-align: center;
}
diff --git a/frontend/src/app/main/ui/ds/product/loader.cljs b/frontend/src/app/main/ui/ds/product/loader.cljs
index 316d9d6ba..eca99efee 100644
--- a/frontend/src/app/main/ui/ds/product/loader.cljs
+++ b/frontend/src/app/main/ui/ds/product/loader.cljs
@@ -9,18 +9,18 @@
[app.common.data.macros :as dm]
[app.main.style :as stl])
(:require
+ [app.common.math :as mth]
[rumext.v2 :as mf]))
(mf/defc loader-icon*
{::mf/props :obj
::mf/private true}
- [{:keys [class width height title] :rest props}]
- (let [class (dm/str (or class "") " " (stl/css :loader))
-
+ [{:keys [width height title] :rest props}]
+ (let [class (stl/css :loader)
props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429"
:role "status"
- :width (or width "100px")
- :height (or height "27px")
+ :width width
+ :height height
:class class})]
[:> "svg" props
@@ -34,23 +34,19 @@
(mf/defc loader*
{::mf/props :obj}
- [{:keys [class wrapperclass width height title overlay children] :rest props}]
+ [{:keys [class width height title overlay children] :rest props}]
- (let [both-provided (and width height)
- neither-provided (and (nil? width) (nil? height))
- wrapperclass (dm/str (or wrapperclass "") " " (stl/css-case :loader-wrapper true
- :loader-wrapper-overlay overlay))
- props (mf/spread-props props {:class wrapperclass})]
+ (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"))
- (assert (or both-provided neither-provided)
- (dm/str "Invalid props: both 'width' and 'height' must be provided or neither. "
- "Received width: " width ", height: " height))
[:> "div" props
[:> loader-icon* {:title title
- :width width
- :class class
- :height height}]
+ :width w
+ :height h}]
children]))
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/product/loader.scss b/frontend/src/app/main/ui/ds/product/loader.scss
index e54192dfb..125972739 100644
--- a/frontend/src/app/main/ui/ds/product/loader.scss
+++ b/frontend/src/app/main/ui/ds/product/loader.scss
@@ -14,25 +14,30 @@
}
}
-.loader-wrapper {
- --color-loader-foreground: var(--color-foreground-secondary);
- color: var(--color-loader-foreground);
- display: flex;
+.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);
}
-.loader-wrapper-overlay {
+.wrapper-overlay {
display: grid;
- place-items: center;
+ place-content: center;
height: 100%;
width: 100%;
+ row-gap: var(--sp-s);
}
.loader {
fill: currentColor;
+ width: var(--icon-width);
}
.loader-line {
- fill: currentColor;
animation: line-pencil 0.8s infinite linear;
}
diff --git a/frontend/src/app/main/ui/ds/product/loader.stories.jsx b/frontend/src/app/main/ui/ds/product/loader.stories.jsx
index d00a7199e..8616f5c88 100644
--- a/frontend/src/app/main/ui/ds/product/loader.stories.jsx
+++ b/frontend/src/app/main/ui/ds/product/loader.stories.jsx
@@ -7,28 +7,38 @@ export default {
title: "Product/Loader",
component: Loader,
args: {
- title: "Loading",
+ title: "Loading…",
overlay: false,
},
- parameters: {
- controls: { exclude: ["theme", "style", "title", "overlay"] },
+ argTypes: {
+ width: { control: "number" },
+ height: { control: "number" },
+ overlay: { control: "boolean" },
+ children: { control: "text" },
},
- render: ({ children, ...args }) => {children},
+ render: ({ ...args }) => ,
};
export const Default = {};
+export const WithContent = {
+ args: {
+ children: "Lorem ipsum",
+ },
+};
+
export const Overlay = {
args: {
overlay: true,
- style: { height: "100vh" },
+ children: "Lorem ipsum",
+ },
+ parameters: {
+ layout: "fullscreen",
},
};
export const Inline = {
args: {
- children: "Loading...",
- width: "16px",
- height: "24px",
+ children: "Lorem ipsum",
},
};
diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs
index 3d3f258d4..a0257e0e2 100644
--- a/frontend/src/app/main/ui/export.cljs
+++ b/frontend/src/app/main/ui/export.cljs
@@ -319,8 +319,7 @@
[:div {:class (stl/css :file-name)}
(if (:loading? file)
- [:> loader* {:width "16px"
- :height "24px"
+ [:> loader* {:width 16
:title (tr "labels.loading")}]
[:span {:class (stl/css :file-icon)}
(cond (:export-success? file) i/tick
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index b902faf62..d41c146d9 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -125,6 +125,7 @@
(mf/defc workspace-loader
[]
[:> loader* {:title (tr "labels.loading")
+ :class (stl/css :workspace-loader)
:overlay true}])
(mf/defc workspace-page
diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss
index ed25a0c0b..566dfc28c 100644
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -21,9 +21,7 @@
}
.workspace-loader {
- @include flexCenter;
grid-area: viewport;
- background-color: var(--loader-background);
}
.workspace-content {