fix(ui): does not render row labels until form state returns (#10002)

Extension of #9933. Custom components are returned by form state,
meaning that if we don't wait for form state to return before rendering
row labels, the default row label component will render in briefly
before being swapped by a custom component (if applicable). Using the
new `isLoading` prop on array and block rows, we can conditionally
render them just as we currently do for the row fields themselves.

Author: jacobsfletch

packages/ui/src/fields/Array/ArrayRow.tsx

@@ -130,12 +130,14 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
         }
         header={
           <div className={`${baseClass}__row-header`}>
-            <RowLabel
-              CustomComponent={CustomRowLabel}
-              label={fallbackLabel}
-              path={path}
-              rowNumber={rowIndex}
-            />
+            {isLoading ? null : (
+              <RowLabel
+                CustomComponent={CustomRowLabel}
+                label={fallbackLabel}
+                path={path}
+                rowNumber={rowIndex}
+              />
+            )}
             {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
           </div>
         }

packages/ui/src/fields/Blocks/BlockRow.tsx

@@ -140,21 +140,23 @@ export const BlockRow: React.FC<BlocksFieldProps> = ({
             : undefined
         }
         header={
-          Label || (
-            <div className={`${baseClass}__block-header`}>
-              <span className={`${baseClass}__block-number`}>
-                {String(rowIndex + 1).padStart(2, '0')}
-              </span>
-              <Pill
-                className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}
-                pillStyle="white"
-              >
-                {getTranslation(block.labels.singular, i18n)}
-              </Pill>
-              <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />
-              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
-            </div>
-          )
+          isLoading
+            ? null
+            : Label || (
+                <div className={`${baseClass}__block-header`}>
+                  <span className={`${baseClass}__block-number`}>
+                    {String(rowIndex + 1).padStart(2, '0')}
+                  </span>
+                  <Pill
+                    className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}
+                    pillStyle="white"
+                  >
+                    {getTranslation(block.labels.singular, i18n)}
+                  </Pill>
+                  <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />
+                  {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
+                </div>
+              )
         }
         isCollapsed={row.collapsed}
         key={row.id}

packages/ui/src/forms/RowLabel/Context/index.tsx

@@ -25,6 +25,7 @@ export const RowLabelProvider: React.FC<Props<unknown>> = ({ children, path, row
   const { getDataByPath, getSiblingData } = useWatchForm()
   const collapsibleData = getSiblingData(path)
   const arrayData = getDataByPath(path)
+
   const data = arrayData || collapsibleData
 
   return <RowLabel.Provider value={{ data, path, rowNumber }}>{children}</RowLabel.Provider>

test/fields/collections/Array/LabelComponent.tsx

@@ -8,6 +8,8 @@ import React from 'react'
 export const ArrayRowLabel: PayloadClientReactComponent<RowLabelComponent> = () => {
   const { data } = useRowLabel<{ title: string }>()
   return (
-    <div style={{ color: 'coral', textTransform: 'uppercase' }}>{data.title || 'Untitled'}</div>
+    <div id="custom-array-row-label" style={{ color: 'coral', textTransform: 'uppercase' }}>
+      {data.title || 'Untitled'}
+    </div>
   )
 }

test/fields/collections/Array/e2e.spec.ts

@@ -84,11 +84,25 @@ describe('Array', () => {
     await page.goto(url.create)
     await page.locator('#field-rowLabelAsComponent >> .array-field__add-row').click()
 
+    // ensure the default label does not blink in before form state returns
+    const defaultRowLabelWasAttached = await page
+      .waitForSelector('#field-rowLabelAsComponent .array-field__row-header .row-label', {
+        state: 'attached',
+        timeout: 100, // A small timeout to catch any transient rendering
+      })
+      .catch(() => false) // If it doesn't appear, this resolves to `false`
+
+    expect(defaultRowLabelWasAttached).toBeFalsy()
+
+    await expect(page.locator('#field-rowLabelAsComponent #custom-array-row-label')).toBeVisible()
+
     await page.locator('#field-rowLabelAsComponent__0__title').fill(label)
     await wait(100)
+
     const customRowLabel = page.locator(
       '#rowLabelAsComponent-row-0 >> .array-field__row-header > :text("custom row label")',
     )
+
     await expect(customRowLabel).toHaveCSS('text-transform', 'uppercase')
   })