From 735e385537a505db00b21b2567f829bcb1718c3c Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Fri, 15 Jul 2022 17:26:05 -0700
Subject: [PATCH] feat: only renders arrays and blocks once they are
 initialized

---
 src/admin/components/forms/field-types/Array/Array.tsx   | 6 ++++--
 src/admin/components/forms/field-types/Blocks/Blocks.tsx | 6 ++++--
 src/admin/components/forms/field-types/rowReducer.tsx    | 2 +-
 test/fields/collections/Tabs/index.ts                    | 3 +++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/admin/components/forms/field-types/Array/Array.tsx b/src/admin/components/forms/field-types/Array/Array.tsx
index f935f5521..c92d5c6d6 100644
--- a/src/admin/components/forms/field-types/Array/Array.tsx
+++ b/src/admin/components/forms/field-types/Array/Array.tsx
@@ -59,7 +59,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
 
   const { preferencesKey, preferences } = useDocumentInfo();
   const { setPreference } = usePreferences();
-  const [rows, dispatchRows] = useReducer(reducer, []);
+  const [rows, dispatchRows] = useReducer(reducer, undefined);
   const formContext = useForm();
   const { user } = useAuth();
   const { id } = useDocumentInfo();
@@ -191,7 +191,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     }
   }, [rows, setValue]);
 
-  const hasMaxRows = maxRows && rows.length >= maxRows;
+  const hasMaxRows = maxRows && rows?.length >= maxRows;
 
   const classes = [
     'field-type',
@@ -199,6 +199,8 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     className,
   ].filter(Boolean).join(' ');
 
+  if (!rows) return null;
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div
diff --git a/src/admin/components/forms/field-types/Blocks/Blocks.tsx b/src/admin/components/forms/field-types/Blocks/Blocks.tsx
index 58668128c..aa8cabfd3 100644
--- a/src/admin/components/forms/field-types/Blocks/Blocks.tsx
+++ b/src/admin/components/forms/field-types/Blocks/Blocks.tsx
@@ -61,7 +61,7 @@ const Blocks: React.FC<Props> = (props) => {
 
   const { preferencesKey, preferences } = useDocumentInfo();
   const { setPreference } = usePreferences();
-  const [rows, dispatchRows] = useReducer(reducer, []);
+  const [rows, dispatchRows] = useReducer(reducer, undefined);
   const formContext = useForm();
   const { user } = useAuth();
   const { id } = useDocumentInfo();
@@ -201,7 +201,7 @@ const Blocks: React.FC<Props> = (props) => {
     }
   }, [rows, setValue]);
 
-  const hasMaxRows = maxRows && rows.length >= maxRows;
+  const hasMaxRows = maxRows && rows?.length >= maxRows;
 
   const classes = [
     'field-type',
@@ -209,6 +209,8 @@ const Blocks: React.FC<Props> = (props) => {
     className,
   ].filter(Boolean).join(' ');
 
+  if (!rows) return null;
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div
diff --git a/src/admin/components/forms/field-types/rowReducer.tsx b/src/admin/components/forms/field-types/rowReducer.tsx
index 57e4591bc..584be19d0 100644
--- a/src/admin/components/forms/field-types/rowReducer.tsx
+++ b/src/admin/components/forms/field-types/rowReducer.tsx
@@ -44,7 +44,7 @@ type MOVE = {
 type Action = SET_ALL | SET_COLLAPSE | SET_ALL_COLLAPSED | ADD | REMOVE | MOVE;
 
 const reducer = (currentState: Row[], action: Action): Row[] => {
-  const stateCopy = [...currentState];
+  const stateCopy = [...currentState || []];
 
   switch (action.type) {
     case 'SET_ALL': {
diff --git a/test/fields/collections/Tabs/index.ts b/test/fields/collections/Tabs/index.ts
index a0881394a..dfa4fc246 100644
--- a/test/fields/collections/Tabs/index.ts
+++ b/test/fields/collections/Tabs/index.ts
@@ -9,6 +9,7 @@ const TabsFields: CollectionConfig = {
       tabs: [
         {
           label: 'Tab One',
+          description: 'Here is a description for tab one',
           fields: [
             {
               name: 'array',
@@ -26,6 +27,7 @@ const TabsFields: CollectionConfig = {
         },
         {
           label: 'Tab Two',
+          description: 'Description for tab two',
           fields: [
             {
               name: 'text',
@@ -36,6 +38,7 @@ const TabsFields: CollectionConfig = {
         },
         {
           label: 'Tab Three',
+          description: 'Description for tab three',
           fields: [
             {
               name: 'number',