fix(ui): fixes layout shift when form is submitted (#9184)

Some fields cause layout shift when you submit the form. This PR reduces that flicker.
payloadcms · Nov 14, 2024 · e6d0443 · e6d0443
1 parent 81099cb
commit e6d0443
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/packages/richtext-lexical/src/field/index.scss b/packages/richtext-lexical/src/field/index.scss
@@ -23,9 +23,17 @@
     &--read-only {
       .editor-container {
         .editor {
-          background: var(--theme-elevation-200);
+          @keyframes fadeInBackground {
+            from {
+              background-color: transparent;
+            }
+            to {
+              background-color: var(--theme-elevation-100);
+            }
+          }
+
+          animation: fadeInBackground 0.5s ease forwards;
           color: var(--theme-elevation-450);
-          padding: calc(var(--base) * 0.5);
         }
       }
     }

diff --git a/packages/ui/src/fields/Array/index.tsx b/packages/ui/src/fields/Array/index.tsx
@@ -335,10 +335,11 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
           )}
         </DraggableSortable>
       )}
-      {!readOnly && !hasMaxRows && (
+      {!hasMaxRows && (
         <Button
           buttonStyle="icon-label"
           className={`${baseClass}__add-row`}
+          disabled={readOnly}
           icon="plus"
           iconPosition="left"
           iconStyle="with-border"

diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx
@@ -325,11 +325,12 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
           )}
         </DraggableSortable>
       )}
-      {!readOnly && !hasMaxRows && (
+      {!hasMaxRows && (
         <Fragment>
           <DrawerToggler className={`${baseClass}__drawer-toggler`} slug={drawerSlug}>
             <Button
               buttonStyle="icon-label"
+              disabled={readOnly}
               el="span"
               icon="plus"
               iconPosition="left"

diff --git a/packages/ui/src/scss/vars.scss b/packages/ui/src/scss/vars.scss
@@ -141,8 +141,8 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
   line-height: base(1);
   padding: base(0.4) base(0.75);
   -webkit-appearance: none;
-  transition-property: border, box-shadow;
-  transition-duration: 100ms;
+  transition-property: border, box-shadow, background-color;
+  transition-duration: 100ms, 100ms, 500ms;
   transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
   &[data-rtl='true'] {