Merge pull request #820 from payloadcms/fix/#801

fix: email not always loading while viewing auth collections

src/admin/components/forms/Form/index.tsx

@@ -42,7 +42,6 @@ const Form: React.FC<Props> = (props) => {
     initialState, // fully formed initial field state
     initialData, // values only, paths are required as key - form should build initial state as convenience
     waitForAutocomplete,
-    log,
   } = props;
 
   const history = useHistory();

src/admin/components/forms/useField/index.tsx

@@ -38,7 +38,7 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
 
   const initialValue = field?.initialValue as T;
 
-  const [internalValue, setInternalValue] = useState(field?.value as T);
+  const [internalValue, setInternalValue] = useState(() => field?.value as T);
   const [internallyValid, setInternallyValid] = useState<boolean>(undefined);
 
   // Debounce internal values to update form state only every 60ms

src/admin/components/views/Account/index.tsx

@@ -10,13 +10,14 @@ import DefaultAccount from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import { Fields } from '../../forms/Form/types';
 
 const AccountView: React.FC = () => {
   const { state: locationState } = useLocation<{ data: unknown }>();
   const locale = useLocale();
   const { setStepNav } = useStepNav();
   const { user, permissions } = useAuth();
-  const [initialState, setInitialState] = useState({});
+  const [initialState, setInitialState] = useState<Fields>();
   const { id, preferences } = useDocumentInfo();
 
   const {
@@ -83,7 +84,7 @@ const AccountView: React.FC = () => {
         hasSavePermission,
         initialState,
         apiURL,
-        isLoading: isLoadingDocument || !preferences,
+        isLoading: !initialState || !preferences,
       }}
     />
   );

src/admin/components/views/Global/index.tsx

@@ -12,13 +12,14 @@ import DefaultGlobal from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
 import { IndexProps } from './types';
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import { Fields } from '../../forms/Form/types';
 
 const GlobalView: React.FC<IndexProps> = (props) => {
   const { state: locationState } = useLocation<{data?: Record<string, unknown>}>();
   const locale = useLocale();
   const { setStepNav } = useStepNav();
   const { permissions, user } = useAuth();
-  const [initialState, setInitialState] = useState({});
+  const [initialState, setInitialState] = useState<Fields>();
   const { getVersions, preferences } = useDocumentInfo();
 
   const {
@@ -80,7 +81,7 @@ const GlobalView: React.FC<IndexProps> = (props) => {
       DefaultComponent={DefaultGlobal}
       CustomComponent={CustomEdit}
       componentProps={{
-        isLoading: isLoadingDocument || !preferences,
+        isLoading: !initialState || !preferences,
         data: dataToRender,
         permissions: globalPermissions,
         initialState,

src/admin/components/views/collections/Edit/index.tsx

@@ -13,6 +13,7 @@ import { useLocale } from '../../../utilities/Locale';
 import { IndexProps } from './types';
 import { StepNavItem } from '../../../elements/StepNav/types';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
+import { Fields } from '../../../forms/Form/types';
 
 const EditView: React.FC<IndexProps> = (props) => {
   const { collection: incomingCollection, isEditing } = props;
@@ -41,7 +42,7 @@ const EditView: React.FC<IndexProps> = (props) => {
   const { state: locationState } = useLocation();
   const history = useHistory();
   const { setStepNav } = useStepNav();
-  const [initialState, setInitialState] = useState({});
+  const [initialState, setInitialState] = useState<Fields>();
   const { permissions, user } = useAuth();
   const { getVersions, preferences } = useDocumentInfo();
 
@@ -123,7 +124,7 @@ const EditView: React.FC<IndexProps> = (props) => {
       DefaultComponent={DefaultEdit}
       CustomComponent={CustomEdit}
       componentProps={{
-        isLoading: isLoadingDocument || !preferences,
+        isLoading: !initialState || !preferences,
         data: dataToRender,
         collection,
         permissions: collectionPermissions,