Display loading indicator in table when loading members

hypothesis · Nov 29, 2024 · 2f584a3 · 2f584a3
1 parent 6dc5847
commit 2f584a3
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/h/static/scripts/group-forms/components/EditGroupMembersForm.tsx b/h/static/scripts/group-forms/components/EditGroupMembersForm.tsx
@@ -307,6 +307,7 @@ export default function EditGroupMembersForm({
               rows={members ?? []}
               columns={columns}
               renderItem={renderRow}
+              loading={!members}
             />
           </Scroll>
         </div>

diff --git a/h/static/scripts/group-forms/components/test/EditGroupMembersForm-test.js b/h/static/scripts/group-forms/components/test/EditGroupMembersForm-test.js
@@ -168,9 +168,11 @@ describe('EditGroupMembersForm', () => {
         headers: config.api.readGroupMembers.headers,
       }),
     );
+    assert.isTrue(wrapper.find('DataTable').prop('loading'));
 
     await waitForTable(wrapper);
 
+    assert.isFalse(wrapper.find('DataTable').prop('loading'));
     const users = getRenderedUsers(wrapper);
     assert.deepEqual(users, ['bob', 'johnsmith', 'jane']);
   });