misc responsive tweaks, improvements to usePayloadAPI isLoading state

src/client/components/elements/FileDetails/index.scss

@@ -91,6 +91,7 @@
     &__main-detail {
       border-top: $style-stroke-width-m solid white;
       order: 3;
+      width: 100%;
     }
   }
 }

src/client/components/elements/PreviewButton/index.js

@@ -11,9 +11,9 @@ const PreviewButton = ({ generatePreviewURL }) => {
   const { getFields } = useForm();
   const fields = getFields();
 
-  const previewURL = (generatePreviewURL && typeof generatePreviewURL === 'function') ? generatePreviewURL(fields, token) : null;
+  if (generatePreviewURL && typeof generatePreviewURL === 'function') {
+    const previewURL = generatePreviewURL(fields, token);
 
-  if (previewURL) {
     return (
       <Button
         el="anchor"

src/client/components/forms/DraggableSection/index.scss

@@ -130,6 +130,7 @@
 // EXTERNAL SCOPES
 //////////////////////
 
+.global-edit,
 .collection-edit {
   @include absolutely-position-panels();
 

src/client/components/forms/field-types/Upload/index.scss

@@ -4,11 +4,12 @@
 	position: relative;
 
   &__wrap {
-    padding: base(1.5);
+    display: flex;
+    padding: base(1.5) base(1.5) $baseline;
     background: $color-background-gray;
 
     .btn {
-      margin: 0 $baseline 0 0;
+      margin: 0 $baseline base(.5) 0;
     }
   }
 }

src/client/components/views/collections/Edit/Default.js

@@ -5,6 +5,7 @@ import format from 'date-fns/format';
 import config from 'payload/config';
 import Eyebrow from '../../../elements/Eyebrow';
 import Form from '../../../forms/Form';
+import Loading from '../../../elements/Loading';
 import PreviewButton from '../../../elements/PreviewButton';
 import FormSubmit from '../../../forms/Submit';
 import RenderFields from '../../../forms/RenderFields';
@@ -25,7 +26,7 @@ const DefaultEditView = (props) => {
   const { params: { id } = {} } = useRouteMatch();
 
   const {
-    collection, isEditing, data, onSave, permissions,
+    collection, isEditing, data, onSave, permissions, isLoading,
   } = props;
 
   const {
@@ -63,21 +64,28 @@ const DefaultEditView = (props) => {
           <Eyebrow />
           <LeaveWithoutSaving />
           <div className={`${baseClass}__edit`}>
-            <header className={`${baseClass}__header`}>
-              <h1>
-                <RenderTitle {...{ data, useAsTitle, fallback: '[Untitled]' }} />
-              </h1>
-            </header>
-            <RenderFields
-              operation={isEditing ? 'update' : 'create'}
-              readOnly={!hasSavePermission}
-              permissions={permissions.fields}
-              filter={field => (!field.position || (field.position && field.position !== 'sidebar'))}
-              fieldTypes={fieldTypes}
-              fieldSchema={fields}
-              initialData={data}
-              customComponentsPath={`${slug}.fields.`}
-            />
+            {isLoading && (
+              <Loading />
+            )}
+            {!isLoading && (
+              <>
+                <header className={`${baseClass}__header`}>
+                  <h1>
+                    <RenderTitle {...{ data, useAsTitle, fallback: '[Untitled]' }} />
+                  </h1>
+                </header>
+                <RenderFields
+                  operation={isEditing ? 'update' : 'create'}
+                  readOnly={!hasSavePermission}
+                  permissions={permissions.fields}
+                  filter={field => (!field.position || (field.position && field.position !== 'sidebar'))}
+                  fieldTypes={fieldTypes}
+                  fieldSchema={fields}
+                  initialData={data}
+                  customComponentsPath={`${slug}.fields.`}
+                />
+              </>
+            )}
           </div>
         </div>
         <div className={`${baseClass}__sidebar`}>
@@ -123,43 +131,47 @@ const DefaultEditView = (props) => {
               </a>
             </div>
           )}
-          <div className={`${baseClass}__sidebar-fields`}>
-            <RenderFields
-              operation={isEditing ? 'update' : 'create'}
-              readOnly={!hasSavePermission}
-              permissions={permissions.fields}
-              filter={field => field.position === 'sidebar'}
-              position="sidebar"
-              fieldTypes={fieldTypes}
-              fieldSchema={fields}
-              initialData={data}
-              customComponentsPath={`${slug}.fields.`}
-            />
-          </div>
-          {isEditing && (
-            <ul className={`${baseClass}__meta`}>
-              <li>
-                <div className={`${baseClass}__label`}>ID</div>
-                <div>{id}</div>
-              </li>
-              {timestamps && (
-                <>
-                  {data.updatedAt && (
-                    <li>
-                      <div className={`${baseClass}__label`}>Last Modified</div>
-                      <div>{format(new Date(data.updatedAt), 'MMMM do yyyy, h:mma')}</div>
-                    </li>
+          {!isLoading && (
+            <>
+              <div className={`${baseClass}__sidebar-fields`}>
+                <RenderFields
+                  operation={isEditing ? 'update' : 'create'}
+                  readOnly={!hasSavePermission}
+                  permissions={permissions.fields}
+                  filter={field => field.position === 'sidebar'}
+                  position="sidebar"
+                  fieldTypes={fieldTypes}
+                  fieldSchema={fields}
+                  initialData={data}
+                  customComponentsPath={`${slug}.fields.`}
+                />
+              </div>
+              {isEditing && (
+                <ul className={`${baseClass}__meta`}>
+                  <li>
+                    <div className={`${baseClass}__label`}>ID</div>
+                    <div>{id}</div>
+                  </li>
+                  {timestamps && (
+                    <>
+                      {data.updatedAt && (
+                        <li>
+                          <div className={`${baseClass}__label`}>Last Modified</div>
+                          <div>{format(new Date(data.updatedAt), 'MMMM do yyyy, h:mma')}</div>
+                        </li>
+                      )}
+                      {data.createdAt && (
+                        <li>
+                          <div className={`${baseClass}__label`}>Created</div>
+                          <div>{format(new Date(data.createdAt), 'MMMM do yyyy, h:mma')}</div>
+                        </li>
+                      )}
+                    </>
                   )}
-                  {data.createdAt && (
-                    <li>
-                      <div className={`${baseClass}__label`}>Created</div>
-                      <div>{format(new Date(data.createdAt), 'MMMM do yyyy, h:mma')}</div>
-                    </li>
-                  )}
-                </>
-              )}
 
-            </ul>
+                </ul>
+              )}
+            </>
           )}
         </div>
       </Form>
@@ -169,10 +181,12 @@ const DefaultEditView = (props) => {
 
 DefaultEditView.defaultProps = {
   isEditing: false,
+  isLoading: true,
   data: undefined,
 };
 
 DefaultEditView.propTypes = {
+  isLoading: PropTypes.bool,
   collection: PropTypes.shape({
     labels: PropTypes.shape({
       plural: PropTypes.string,

src/client/components/views/collections/Edit/index.js

@@ -40,7 +40,7 @@ const EditView = (props) => {
     });
   };
 
-  const [{ data }] = usePayloadAPI(
+  const [{ data, isLoading }] = usePayloadAPI(
     (isEditing ? `${serverURL}${api}/${slug}/${id}` : null),
     { initialParams: { 'fallback-locale': 'null' } },
   );
@@ -77,6 +77,7 @@ const EditView = (props) => {
       DefaultComponent={DefaultEdit}
       path={`${slug}.views.Edit`}
       componentProps={{
+        isLoading,
         data: dataToRender,
         collection: { ...collection, fields },
         permissions: collectionPermissions,

src/client/hooks/usePayloadAPI.js

@@ -12,7 +12,7 @@ const usePayloadAPI = (url, options = {}) => {
 
   const [data, setData] = useState(initialData);
   const [params, setParams] = useState(initialParams);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [isError, setIsError] = useState(false);
   const locale = useLocale();
 
@@ -30,14 +30,19 @@ const usePayloadAPI = (url, options = {}) => {
         const response = await requests.get(`${url}?${search}`);
         const json = await response.json();
         setData(json);
+        setIsLoading(false);
       } catch (error) {
         setIsError(true);
+        setIsLoading(false);
       }
-
-      setIsLoading(false);
     };
 
-    if (url) fetchData();
+    if (url) {
+      fetchData();
+    } else {
+      setIsError(false);
+      setIsLoading(false);
+    }
   }, [url, locale, search, onLoad]);
 
   return [{ data, isLoading, isError }, { setParams }];