Update: Use nicer loading animation

CarbonPackages · Oct 24, 2024 · 343307f · 343307f
1 parent a9b9a54
commit 343307f
Show file tree

Hide file tree

Showing 6 changed files with 244 additions and 245 deletions.
diff --git a/Resources/Private/Editor/ColorPicker/index.tsx b/Resources/Private/Editor/ColorPicker/index.tsx
@@ -8,6 +8,7 @@ import { selectors } from "@neos-project/neos-ui-redux-store";
 import * as stylex from "@stylexjs/stylex";
 import { colors, sizes, transitions } from "./Tokens.stylex";
 import HexOutput from "./Components/HexOutput";
+import LoadingAnimation from "carbon-neos-loadinganimation/LoadingWithStyleX";
 
 const getDataLoaderOptionsForProps = (props: any) => ({
     contextNodePath: props.focusedNodePath,
@@ -59,12 +60,6 @@ const styles = stylex.create({
         flexDirection: "column",
         gap: sizes.spacingHalf,
     },
-    loading: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: sizes.goldenUnit,
-    },
     popoverButton: {
         display: "flex",
         alignItems: "center",
@@ -205,13 +200,7 @@ function Editor(props) {
                 <Label htmlFor={id}>
                     {label} {renderHelpIcon()}
                 </Label>
-                <div
-                    {...stylex.props(styles.loading)}
-                    id={id}
-                    title={i18nRegistry.translate("Carbon.ColorPicker.OKLCH:Main:loading")}
-                >
-                    <Icon icon="spinner" size="lg" spin />
-                </div>
+                <LoadingAnimation isLoading={isLoading} id={id} title="Carbon.ColorPicker.OKLCH:Main:loading" />
             </>
         );
     }

diff --git a/Resources/Public/Plugin.css b/Resources/Public/Plugin.css
@@ -5,6 +5,8 @@
 .x11g6tue:not(#\#){background:none}
 .x1hgx17m:not(#\#){background:var(--xm2tcaw)}
 .x1wty727:not(#\#){border:0}
+.x1fdo2jl:not(#\#){grid-area:content}
+.xd3rg8h:not(#\#){grid-template:'content' 1fr / 1fr}
 .xdneb0g:not(#\#){margin:calc(var(--x12ft4ps) * -1) calc(var(--xdcwdaz) * -1)}
 .x1717udv:not(#\#){padding:0}
 .x1dskcqz:not(#\#){padding:5px var(--x1xhd60u)}
@@ -24,6 +26,7 @@
 .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
 .x1hr3lfm:not(#\#):not(#\#){padding-inline:16px}
 .xtqyqw7:not(#\#):not(#\#){padding-inline:var(--x1xhd60u)}
+.xc8avi6:not(#\#):not(#\#){transition:opacity var(--transition-Default),transform var(--transition-Default) ease}
 .xl913vs:not(#\#):not(#\#){transition:transform var(--xk43sx8) var(--x111wrgi)}
 .x5z8be9:not(#\#):not(#\#){transition:var(--transition,revert)}
 .xfbmp4j:where(*) .react-colorful__pointer:hover:not(#\#):not(#\#){border-color:var(--x15izvnz)}
@@ -53,10 +56,10 @@
 .x1sirlc8:not(#\#):not(#\#):not(#\#){font-family:var(--xhezqga)}
 .xiq9r4:not(#\#):not(#\#):not(#\#){font-size:var(--x11o33fd)}
 .xi7raoi:not(#\#):not(#\#):not(#\#){grid-template-rows:var(--gridTemplateRows,revert)}
-.xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
 .x1nhvcw1:not(#\#):not(#\#):not(#\#){justify-content:flex-start}
 .x1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}
 .x1szn6h9:not(#\#):not(#\#):not(#\#){justify-content:stretch}
+.x1o2pa38:not(#\#):not(#\#):not(#\#){justify-items:center}
 .x1bexyg0:not(#\#):not(#\#):not(#\#){line-height:calc(var(--x1fv9uxr) - 10px)}
 .x190dgpg:not(#\#):not(#\#):not(#\#){opacity:.65}
 .x1u4uod0:not(#\#):not(#\#):not(#\#){opacity:var(--opacity,revert)}
@@ -84,6 +87,7 @@
 .x16i8m89:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--x1xhd60u)}
 .xlt0ddm:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--xdcwdaz)}
 .x193iq5w:not(#\#):not(#\#):not(#\#):not(#\#){max-width:100%}
+.x1gu4hsp:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--minHeight,revert)}
 .x1rhtz0q:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--x1fv9uxr)}
 .x15g7okx:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--x1fv9uxr)}
 .xh8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}

diff --git a/Resources/Public/Plugin.js b/Resources/Public/Plugin.js
diff --git a/Resources/Public/Plugin.js.map b/Resources/Public/Plugin.js.map
diff --git a/package.json b/package.json
@@ -13,14 +13,15 @@
     "@stylexjs/stylex": "^0.8.0",
     "@types/nearest-color": "^0.4.1",
     "@types/react-redux": "^7.1.34",
+    "carbon-neos-loadinganimation": "^1.1.0",
     "color-name-list": "^10.28.0",
     "colorjs.io": "^0.5.2",
     "esbuild": "^0.24.0",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "nearest-color": "^0.4.4",
     "onchange": "^7.1.0",
     "prettier": "^3.3.3",
     "react-colorful": "^5.6.1",
-    "typescript-eslint": "^8.9.0"
+    "typescript-eslint": "^8.11.0"
   }
 }