Standardizing spinner placement and adding missing spinners, Fixes #689

css/styles.css

@@ -44,6 +44,10 @@ h1 {
   font-weight: bold;
 }
 
+.card > .card-body {
+  position: relative;
+}
+
 .sidebar-filters > .card-body {
   padding: 15px 15px 0 15px;
 }

src/components/bucket/BucketAttributes.tsx

@@ -60,24 +60,24 @@ export default function BucketAttributes({
     [bid, updateBucket]
   );
 
-  if (busy) {
-    return <Spinner />;
-  }
-
   return (
     <div>
       <h1>
         Edit <b>{bid}</b> bucket attributes
       </h1>
       <BucketTabs bid={bid} capabilities={capabilities} selected="attributes">
-        <BucketForm
-          session={session}
-          bid={bid}
-          bucket={bucket}
-          formData={formData}
-          deleteBucket={handleDeleteBucket}
-          onSubmit={handleSubmit}
-        />
+        {busy ? (
+          <Spinner />
+        ) : (
+          <BucketForm
+            session={session}
+            bid={bid}
+            bucket={bucket}
+            formData={formData}
+            deleteBucket={handleDeleteBucket}
+            onSubmit={handleSubmit}
+          />
+        )}
       </BucketTabs>
     </div>
   );

src/components/bucket/BucketCollections.tsx

@@ -76,6 +76,7 @@ export default function BucketCollections({
             collections={collections}
             listBucketNextCollections={listBucketNextCollections}
             capabilities={capabilities}
+            showSpinner={!collections.loaded}
           />
         )}
         {listActions}

src/components/bucket/BucketGroups.tsx

@@ -42,12 +42,17 @@ export default function BucketCollections({
       </h1>
       <BucketTabs bid={bid} selected="groups" capabilities={capabilities}>
         {listActions}
-        {groups.length === 0 ? (
+        {!bucket.busy && groups.length === 0 ? (
           <div className="alert alert-info">
             <p>This bucket has no groups.</p>
           </div>
         ) : (
-          <DataList bid={bid} groups={groups} capabilities={capabilities} />
+          <DataList
+            bid={bid}
+            groups={groups}
+            capabilities={capabilities}
+            showSpinner={bucket.busy}
+          />
         )}
         {listActions}
       </BucketTabs>

src/components/bucket/BucketPermissions.tsx

@@ -19,9 +19,6 @@ export function BucketPermissions() {
 
   const { busy, permissions } = bucket;
   const acls = ["read", "write", "collection:create", "group:create"];
-  if (busy) {
-    return <Spinner />;
-  }
   return (
     <div>
       <h1>
@@ -32,12 +29,16 @@ export function BucketPermissions() {
         capabilities={session.serverInfo.capabilities}
         selected="permissions"
       >
-        <PermissionsForm
-          permissions={permissions}
-          acls={acls}
-          readonly={!canEditBucket(session, bucket.data.id)}
-          onSubmit={onSubmit}
-        />
+        {busy ? (
+          <Spinner />
+        ) : (
+          <PermissionsForm
+            permissions={permissions}
+            acls={acls}
+            readonly={!canEditBucket(session, bucket.data.id)}
+            onSubmit={onSubmit}
+          />
+        )}
       </BucketTabs>
     </div>
   );

src/components/bucket/CollectionDataList.tsx

@@ -1,3 +1,4 @@
+import Spinner from "../Spinner";
 import AdminLink from "@src/components/AdminLink";
 import PaginatedTable from "@src/components/PaginatedTable";
 import { canCreateCollection } from "@src/permission";
@@ -28,7 +29,13 @@ export function ListActions(props) {
 }
 
 export function DataList(props) {
-  const { bid, collections, capabilities, listBucketNextCollections } = props;
+  const {
+    bid,
+    collections,
+    capabilities,
+    listBucketNextCollections,
+    showSpinner,
+  } = props;
   const { loaded, entries, hasNextPage } = collections;
   const thead = (
     <thead>
@@ -45,6 +52,13 @@ export function DataList(props) {
 
   const tbody = (
     <tbody className={!loaded ? "loading" : ""}>
+      {showSpinner && (
+        <tr>
+          <td colSpan={6}>
+            <Spinner />
+          </td>
+        </tr>
+      )}
       {entries.map((collection, index) => {
         const {
           id: cid,

src/components/bucket/GroupDataList.tsx

@@ -1,3 +1,4 @@
+import Spinner from "../Spinner";
 import AdminLink from "@src/components/AdminLink";
 import { canCreateGroup } from "@src/permission";
 import { timeago } from "@src/utils";
@@ -6,7 +7,7 @@ import { Gear } from "react-bootstrap-icons";
 import { ClockHistory } from "react-bootstrap-icons";
 
 export function DataList(props) {
-  const { bid, groups, capabilities } = props;
+  const { bid, groups, capabilities, showSpinner } = props;
   return (
     <table className="table table-striped table-bordered record-list">
       <thead>
@@ -18,6 +19,13 @@ export function DataList(props) {
         </tr>
       </thead>
       <tbody>
+        {showSpinner && (
+          <tr>
+            <td colSpan={4}>
+              <Spinner />
+            </td>
+          </tr>
+        )}
         {groups.map((group, index) => {
           const { id: gid, members, last_modified } = group;
           const date = new Date(last_modified);

src/components/collection/CollectionAttributes.tsx

@@ -63,10 +63,6 @@ export default function CollectionAttributes({
   } = match;
   const { busy, data: formData } = collection;
 
-  if (busy) {
-    return <Spinner />;
-  }
-
   return (
     <div>
       <h1>
@@ -82,16 +78,20 @@ export default function CollectionAttributes({
         selected="attributes"
         capabilities={capabilities}
       >
-        <CollectionForm
-          bid={bid}
-          cid={cid}
-          session={session}
-          bucket={bucket}
-          collection={collection}
-          deleteCollection={handleDeleteCollection}
-          formData={formData}
-          onSubmit={onSubmit}
-        />
+        {busy ? (
+          <Spinner />
+        ) : (
+          <CollectionForm
+            bid={bid}
+            cid={cid}
+            session={session}
+            bucket={bucket}
+            collection={collection}
+            deleteCollection={handleDeleteCollection}
+            formData={formData}
+            onSubmit={onSubmit}
+          />
+        )}
       </CollectionTabs>
     </div>
   );

src/components/collection/CollectionPermissions.tsx

@@ -28,9 +28,6 @@ export function CollectionPermissions() {
     );
   };
 
-  if (busy) {
-    return <Spinner />;
-  }
   return (
     <div>
       <h1>
@@ -46,12 +43,16 @@ export function CollectionPermissions() {
         capabilities={session.serverInfo.capabilities}
         selected="permissions"
       >
-        <PermissionsForm
-          permissions={permissions}
-          acls={acls}
-          readonly={!canEditCollection(session, bucket.data.id, collection)}
-          onSubmit={onSubmit}
-        />
+        {busy ? (
+          <Spinner />
+        ) : (
+          <PermissionsForm
+            permissions={permissions}
+            acls={acls}
+            readonly={!canEditCollection(session, bucket.data.id, collection)}
+            onSubmit={onSubmit}
+          />
+        )}
       </CollectionTabs>
     </div>
   );

src/components/group/GroupAttributes.tsx

@@ -43,6 +43,7 @@ export default function GroupAttributes(props: Props) {
     params: { bid, gid },
   } = match;
   const { busy, data: formData } = group;
+  console.log(group);
 
   const onSubmit = useCallback(
     (formData: GroupData) => {
@@ -60,10 +61,6 @@ export default function GroupAttributes(props: Props) {
     [bid, deleteGroup]
   );
 
-  if (busy || formData == null) {
-    return <Spinner />;
-  }
-
   return (
     <div>
       <h1>
@@ -79,16 +76,20 @@ export default function GroupAttributes(props: Props) {
         selected="attributes"
         capabilities={capabilities}
       >
-        <GroupForm
-          bid={bid}
-          gid={gid}
-          session={session}
-          bucket={bucket}
-          group={group}
-          deleteGroup={onDeleteGroup}
-          formData={formData}
-          onSubmit={onSubmit}
-        />
+        {busy || formData == null ? ( // formData will be null until it is fetched, busy will be false until the fetch starts, need to wait for for both conditions before rendering
+          <Spinner />
+        ) : (
+          <GroupForm
+            bid={bid}
+            gid={gid}
+            session={session}
+            bucket={bucket}
+            group={group}
+            deleteGroup={onDeleteGroup}
+            formData={formData}
+            onSubmit={onSubmit}
+          />
+        )}
       </GroupTabs>
     </div>
   );

src/components/group/GroupPermissions.tsx

@@ -22,9 +22,6 @@ export function GroupPermissions() {
   const onSubmit = ({ formData }: { formData: GroupPermissionsType }) => {
     dispatch(BucketActions.updateGroup(bid, gid, { permissions: formData }));
   };
-  if (busy) {
-    return <Spinner />;
-  }
   return (
     <div>
       <h1>
@@ -40,12 +37,16 @@ export function GroupPermissions() {
         capabilities={session.serverInfo.capabilities}
         selected="permissions"
       >
-        <PermissionsForm
-          permissions={permissions}
-          acls={["read", "write"]}
-          readonly={!canEditGroup(session, bucket.data.id, group)}
-          onSubmit={onSubmit}
-        />
+        {busy ? (
+          <Spinner />
+        ) : (
+          <PermissionsForm
+            permissions={permissions}
+            acls={["read", "write"]}
+            readonly={!canEditGroup(session, bucket.data.id, group)}
+            onSubmit={onSubmit}
+          />
+        )}
       </GroupTabs>
     </div>
   );

src/components/record/RecordPermissions.tsx

@@ -26,9 +26,6 @@ export function RecordPermissions() {
   };
   const { busy, permissions } = record;
   const acls = ["read", "write"];
-  if (busy) {
-    return <Spinner />;
-  }
   return (
     <div>
       <h1>
@@ -45,12 +42,16 @@ export function RecordPermissions() {
         capabilities={session.serverInfo.capabilities}
         selected="permissions"
       >
-        <PermissionsForm
-          permissions={permissions}
-          acls={acls}
-          readonly={!canEditRecord(session, bid, collection, record)}
-          onSubmit={onSubmit}
-        />
+        {busy ? (
+          <Spinner />
+        ) : (
+          <PermissionsForm
+            permissions={permissions}
+            acls={acls}
+            readonly={!canEditRecord(session, bid, collection, record)}
+            onSubmit={onSubmit}
+          />
+        )}
       </RecordTabs>
     </div>
   );

src/components/signoff/SimpleReview/index.tsx

@@ -116,6 +116,8 @@ export default function SimpleReview({
             console.error(ex);
           }
         }
+      } else {
+        setRecords({ oldRecords: [], newRecords: [], loading: false });
       }
     }
     getRecords();
@@ -137,11 +139,7 @@ export default function SimpleReview({
         Not authenticated
       </div>
     );
-  } else if (
-    session.authenticating ||
-    session.busy ||
-    (records.loading && signoffSource && signoffDest)
-  ) {
+  } else if (session.authenticating || session.busy) {
     return <Spinner />;
   }
   const handleRollback = (text: string) => {
@@ -212,7 +210,7 @@ export default function SimpleReview({
         capabilities={capabilities || {}}
         totalRecords={collection?.totalRecords || 0}
       >
-        <SignoffContent />
+        {records.loading ? <Spinner /> : <SignoffContent />}
       </CollectionTabs>
     </div>
   );