fix: position field loader relative to sidebar, not fields

measuredco · May 30, 2024 · 2e8936e · 2e8936e
1 parent 8ccfa4c
commit 2e8936e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/core/components/Puck/components/Fields/index.tsx b/packages/core/components/Puck/components/Fields/index.tsx
@@ -278,7 +278,9 @@ export const Fields = () => {
  </Wrapper>
  {isLoading && (
  <div className={getClassName("loadingOverlay")}>
- <Loader size={32} />
+ <div className={getClassName("loadingOverlayInner")}>
+ <Loader size={16} />
+ </div>
  </div>
  )}
  </form>

diff --git a/packages/core/components/Puck/components/Fields/styles.module.css b/packages/core/components/Puck/components/Fields/styles.module.css
@@ -1,5 +1,4 @@
 .PuckFields {
- position: relative;
  font-family: var(--puck-font-family);
 }
 
@@ -10,14 +9,21 @@
 .PuckFields-loadingOverlay {
  background: var(--puck-color-white);
  display: flex;
- justify-content: center;
- align-items: center;
+ justify-content: flex-end;
+ align-items: flex-start;
  height: 100%;
  width: 100%;
- top: 0;
+ top: 0px;
  position: absolute;
  z-index: 1;
  pointer-events: all;
  box-sizing: border-box;
  opacity: 0.8;
 }
+
+.PuckFields-loadingOverlayInner {
+ display: flex;
+ padding: 16px;
+ position: sticky;
+ top: 0;
+}