💄(frontend) fix flickering on datagrid sorting member

The datagrid was flickering when sorting the member list.
This was due to the fact that the list was getting
empty and then filled again with the sorted list
causing the flickering.

src/frontend/apps/desk/src/features/teams/member-management/components/MemberGrid.tsx

@@ -15,6 +15,7 @@ import { Role, Team } from '@/features/teams/team-management';
 
 import { useTeamAccesses } from '../api';
 import { PAGE_SIZE } from '../conf';
+import { Access } from '../types';
 
 import { MemberAction } from './MemberAction';
 
@@ -23,7 +24,6 @@ interface MemberGridProps {
   currentRole: Role;
 }
 
-// FIXME : ask Cunningham to export this type
 type SortModelItem = {
   field: string;
   sort: 'asc' | 'desc' | null;
@@ -58,6 +58,7 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
     pageSize: PAGE_SIZE,
   });
   const [sortModel, setSortModel] = useState<SortModel>([]);
+  const [accesses, setAccesses] = useState<Access[]>([]);
   const { page, pageSize, setPagesCount } = pagination;
 
   const ordering = sortModel.length ? formatSortModel(sortModel[0]) : undefined;
@@ -68,6 +69,11 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
     ordering,
   });
 
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
     const localizedRoles = {
       [Role.ADMIN]: t('Administration'),
       [Role.MEMBER]: t('Member'),
@@ -89,6 +95,9 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
         },
       })) || [];
 
+    setAccesses(accesses);
+  }, [data?.results, t, isLoading]);
+
   useEffect(() => {
     setPagesCount(data?.count ? Math.ceil(data.count / pageSize) : 0);
   }, [data?.count, pageSize, setPagesCount]);