feat: disable inputs when data is loading

packages/web/src/components/PermissionCatalogField/PermissionCatalogFieldLoader/index.jsx

@@ -39,14 +39,14 @@ const PermissionCatalogFieldLoader = () => {
               {[...Array(5)].map((action, index) => (
                 <TableCell key={index} align="center">
                   <Typography variant="subtitle2">
-                    <ControlledCheckbox name="value" />
+                    <ControlledCheckbox name="value" disabled />
                   </Typography>
                 </TableCell>
               ))}
 
               <TableCell>
                 <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton color="info" size="small">
+                  <IconButton color="info" size="small" disabled>
                     <SettingsIcon />
                   </IconButton>
                 </Stack>

packages/web/src/components/PermissionCatalogField/index.ee.jsx

@@ -21,13 +21,15 @@ const PermissionCatalogField = ({
   name = 'permissions',
   disabled = false,
   syncIsCreator = false,
+  loading = false,
 }) => {
   const { data, isLoading: isPermissionCatalogLoading } =
     usePermissionCatalog();
   const permissionCatalog = data?.data;
   const [dialogName, setDialogName] = React.useState();
 
-  if (isPermissionCatalogLoading) return <PermissionCatalogFieldLoader />;
+  if (isPermissionCatalogLoading || loading)
+    return <PermissionCatalogFieldLoader />;
 
   return (
     <TableContainer component={Paper}>
@@ -118,6 +120,7 @@ PermissionCatalogField.propTypes = {
   name: PropTypes.string,
   disabled: PropTypes.bool,
   syncIsCreator: PropTypes.bool,
+  loading: PropTypes.bool,
 };
 
 export default PermissionCatalogField;