diff --git a/packages/web/src/components/DeleteRoleButton/index.ee.tsx b/packages/web/src/components/DeleteRoleButton/index.ee.tsx
index ad3f366f..cd7e9dfb 100644
--- a/packages/web/src/components/DeleteRoleButton/index.ee.tsx
+++ b/packages/web/src/components/DeleteRoleButton/index.ee.tsx
@@ -9,7 +9,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 
 type DeleteRoleButtonProps = {
   roleId: string;
-}
+};
 
 export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
   const { roleId } = props;
diff --git a/packages/web/src/components/DeleteUserButton/index.ee.tsx b/packages/web/src/components/DeleteUserButton/index.ee.tsx
index 428cb953..c4212ea9 100644
--- a/packages/web/src/components/DeleteUserButton/index.ee.tsx
+++ b/packages/web/src/components/DeleteUserButton/index.ee.tsx
@@ -9,7 +9,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 
 type DeleteUserButtonProps = {
   userId: string;
-}
+};
 
 export default function DeleteUserButton(props: DeleteUserButtonProps) {
   const { userId } = props;
diff --git a/packages/web/src/components/ListLoader/index.tsx b/packages/web/src/components/ListLoader/index.tsx
new file mode 100644
index 00000000..3e556554
--- /dev/null
+++ b/packages/web/src/components/ListLoader/index.tsx
@@ -0,0 +1,47 @@
+import {
+  IconButton,
+  Skeleton,
+  Stack,
+  TableCell,
+  TableRow,
+} from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+type ListLoaderProps = {
+  rowsNumber: number;
+  cellNumber: number;
+};
+
+const ListLoader = ({ rowsNumber, cellNumber }: ListLoaderProps) => {
+  return (
+    <>
+      {[...Array(rowsNumber)].map((row, index) => (
+        <TableRow
+          key={index}
+          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+        >
+          {[...Array(cellNumber)].map((cell, index) => (
+            <TableCell key={index} scope="row">
+              <Skeleton />
+            </TableCell>
+          ))}
+
+          <TableCell>
+            <Stack direction="row" gap={1} justifyContent="right">
+              <IconButton size="small">
+                <EditIcon />
+              </IconButton>
+
+              <IconButton size="small">
+                <DeleteIcon />
+              </IconButton>
+            </Stack>
+          </TableCell>
+        </TableRow>
+      ))}
+    </>
+  );
+};
+
+export default ListLoader;
diff --git a/packages/web/src/components/RoleList/index.ee.tsx b/packages/web/src/components/RoleList/index.ee.tsx
index 6b74731e..65353c03 100644
--- a/packages/web/src/components/RoleList/index.ee.tsx
+++ b/packages/web/src/components/RoleList/index.ee.tsx
@@ -13,15 +13,15 @@ import Typography from '@mui/material/Typography';
 import EditIcon from '@mui/icons-material/Edit';
 
 import DeleteRoleButton from 'components/DeleteRoleButton/index.ee';
+import ListLoader from 'components/ListLoader';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
 import * as URLS from 'config/urls';
 
 // TODO: introduce interaction feedback upon deletion (successful + failure)
-// TODO: introduce loading bar
 export default function RoleList(): React.ReactElement {
   const formatMessage = useFormatMessage();
-  const { roles } = useRoles();
+  const { roles, loading } = useRoles();
 
   return (
     <TableContainer component={Paper}>
@@ -50,42 +50,40 @@ export default function RoleList(): React.ReactElement {
           </TableRow>
         </TableHead>
         <TableBody>
-          {roles.map((role) => (
-            <TableRow
-              key={role.id}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell scope="row">
-                <Typography
-                  variant="subtitle2"
-                >
-                  {role.name}
-                </Typography>
-              </TableCell>
+          {loading ? (
+            <ListLoader rowsNumber={3} cellNumber={2} />
+          ) : (
+            roles.map((role) => (
+              <TableRow
+                key={role.id}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell scope="row">
+                  <Typography variant="subtitle2">{role.name}</Typography>
+                </TableCell>
 
-              <TableCell scope="row">
-                <Typography
-                  variant="subtitle2"
-                >
-                  {role.description}
-                </Typography>
-              </TableCell>
+                <TableCell scope="row">
+                  <Typography variant="subtitle2">
+                    {role.description}
+                  </Typography>
+                </TableCell>
 
-              <TableCell>
-                <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton
-                    size="small"
-                    component={Link}
-                    to={URLS.ROLE(role.id)}
-                  >
-                    <EditIcon />
-                  </IconButton>
+                <TableCell>
+                  <Stack direction="row" gap={1} justifyContent="right">
+                    <IconButton
+                      size="small"
+                      component={Link}
+                      to={URLS.ROLE(role.id)}
+                    >
+                      <EditIcon />
+                    </IconButton>
 
-                  <DeleteRoleButton roleId={role.id} />
-                </Stack>
-              </TableCell>
-            </TableRow>
-          ))}
+                    <DeleteRoleButton roleId={role.id} />
+                  </Stack>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
         </TableBody>
       </Table>
     </TableContainer>
diff --git a/packages/web/src/components/UserList/index.tsx b/packages/web/src/components/UserList/index.tsx
index 2315ad8f..f2ab3941 100644
--- a/packages/web/src/components/UserList/index.tsx
+++ b/packages/web/src/components/UserList/index.tsx
@@ -13,13 +13,13 @@ import Typography from '@mui/material/Typography';
 import EditIcon from '@mui/icons-material/Edit';
 
 import DeleteUserButton from 'components/DeleteUserButton/index.ee';
+import ListLoader from 'components/ListLoader';
 import useUsers from 'hooks/useUsers';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 
 // TODO: introduce translation entries
 // TODO: introduce interaction feedback upon deletion (successful + failure)
-// TODO: introduce loading bar
 export default function UserList(): React.ReactElement {
   const formatMessage = useFormatMessage();
   const { users, loading } = useUsers();
@@ -51,42 +51,38 @@ export default function UserList(): React.ReactElement {
           </TableRow>
         </TableHead>
         <TableBody>
-          {users.map((user) => (
-            <TableRow
-              key={user.id}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell scope="row">
-                <Typography
-                  variant="subtitle2"
-                >
-                  {user.fullName}
-                </Typography>
-              </TableCell>
+          {loading ? (
+            <ListLoader rowsNumber={3} cellNumber={2} />
+          ) : (
+            users.map((user) => (
+              <TableRow
+                key={user.id}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell scope="row">
+                  <Typography variant="subtitle2">{user.fullName}</Typography>
+                </TableCell>
 
-              <TableCell>
-                <Typography
-                  variant="subtitle2"
-                >
-                  {user.email}
-                </Typography>
-              </TableCell>
+                <TableCell>
+                  <Typography variant="subtitle2">{user.email}</Typography>
+                </TableCell>
 
-              <TableCell>
-                <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton
-                    size="small"
-                    component={Link}
-                    to={URLS.USER(user.id)}
-                  >
-                    <EditIcon />
-                  </IconButton>
+                <TableCell>
+                  <Stack direction="row" gap={1} justifyContent="right">
+                    <IconButton
+                      size="small"
+                      component={Link}
+                      to={URLS.USER(user.id)}
+                    >
+                      <EditIcon />
+                    </IconButton>
 
-                  <DeleteUserButton userId={user.id} />
-                </Stack>
-              </TableCell>
-            </TableRow>
-          ))}
+                    <DeleteUserButton userId={user.id} />
+                  </Stack>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
         </TableBody>
       </Table>
     </TableContainer>
diff --git a/packages/web/src/pages/EditRole/index.ee.tsx b/packages/web/src/pages/EditRole/index.ee.tsx
index e64aff02..d7efc11e 100644
--- a/packages/web/src/pages/EditRole/index.ee.tsx
+++ b/packages/web/src/pages/EditRole/index.ee.tsx
@@ -13,13 +13,13 @@ import PageTitle from 'components/PageTitle';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
+import { Skeleton } from '@mui/material';
 
 type EditRoleParams = {
   roleId: string;
-}
+};
 
 // TODO: introduce interaction feedback upon deletion (successful + failure)
-// TODO: introduce loading bar
 export default function EditRole(): React.ReactElement {
   const formatMessage = useFormatMessage();
   const [updateRole, { loading }] = useMutation(UPDATE_ROLE);
@@ -33,13 +33,11 @@ export default function EditRole(): React.ReactElement {
           id: roleId,
           name: roleData.name,
           description: roleData.description,
-        }
-      }
+        },
+      },
     });
   };
 
-  if (roleLoading) return <React.Fragment />;
-
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={9} md={8} lg={6}>
@@ -48,33 +46,41 @@ export default function EditRole(): React.ReactElement {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form defaultValues={role} onSubmit={handleRoleUpdate}>
+          {roleLoading ? (
             <Stack direction="column" gap={2}>
-              <TextField
-                required={true}
-                name="name"
-                label={formatMessage('roleForm.name')}
-                fullWidth
-              />
-
-              <TextField
-                required={true}
-                name="description"
-                label={formatMessage('roleForm.description')}
-                fullWidth
-              />
-
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                sx={{ boxShadow: 2 }}
-                loading={loading}
-              >
-                {formatMessage('editRole.submit')}
-              </LoadingButton>
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={45} />
             </Stack>
-          </Form>
+          ) : (
+            <Form defaultValues={role} onSubmit={handleRoleUpdate}>
+              <Stack direction="column" gap={2}>
+                <TextField
+                  required={true}
+                  name="name"
+                  label={formatMessage('roleForm.name')}
+                  fullWidth
+                />
+
+                <TextField
+                  required={true}
+                  name="description"
+                  label={formatMessage('roleForm.description')}
+                  fullWidth
+                />
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={loading}
+                >
+                  {formatMessage('editRole.submit')}
+                </LoadingButton>
+              </Stack>
+            </Form>
+          )}
         </Grid>
       </Grid>
     </Container>
diff --git a/packages/web/src/pages/EditUser/index.tsx b/packages/web/src/pages/EditUser/index.tsx
index 06be358c..f2f20785 100644
--- a/packages/web/src/pages/EditUser/index.tsx
+++ b/packages/web/src/pages/EditUser/index.tsx
@@ -16,17 +16,17 @@ import Form from 'components/Form';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
+import { Skeleton } from '@mui/material';
 
 type EditUserParams = {
   userId: string;
-}
+};
 
 function generateRoleOptions(roles: IRole[]) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
 
 // TODO: introduce interaction feedback upon deletion (successful + failure)
-// TODO: introduce loading bar
 export default function EditUser(): React.ReactElement {
   const formatMessage = useFormatMessage();
   const [updateUser, { loading }] = useMutation(UPDATE_USER);
@@ -42,15 +42,13 @@ export default function EditUser(): React.ReactElement {
           fullName: userDataToUpdate.fullName,
           email: userDataToUpdate.email,
           role: {
-            id: userDataToUpdate.role?.id
-          }
-        }
-      }
+            id: userDataToUpdate.role?.id,
+          },
+        },
+      },
     });
   };
 
-  if (userLoading) return <React.Fragment />;
-
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={9} md={8} lg={6}>
@@ -59,43 +57,57 @@ export default function EditUser(): React.ReactElement {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form defaultValues={user} onSubmit={handleUserUpdate}>
+          {userLoading ? (
             <Stack direction="column" gap={2}>
-              <TextField
-                required={true}
-                name="fullName"
-                label={formatMessage('userForm.fullName')}
-                fullWidth
-              />
-
-              <TextField
-                required={true}
-                name="email"
-                label={formatMessage('userForm.email')}
-                fullWidth
-              />
-
-              <ControlledAutocomplete
-                name="role.id"
-                fullWidth
-                disablePortal
-                disableClearable={true}
-                options={generateRoleOptions(roles)}
-                renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
-                loading={rolesLoading}
-              />
-
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                sx={{ boxShadow: 2 }}
-                loading={loading}
-              >
-                {formatMessage('editUser.submit')}
-              </LoadingButton>
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={55} />
+              <Skeleton variant="rounded" height={45} />
             </Stack>
-          </Form>
+          ) : (
+            <Form defaultValues={user} onSubmit={handleUserUpdate}>
+              <Stack direction="column" gap={2}>
+                <TextField
+                  required={true}
+                  name="fullName"
+                  label={formatMessage('userForm.fullName')}
+                  fullWidth
+                />
+
+                <TextField
+                  required={true}
+                  name="email"
+                  label={formatMessage('userForm.email')}
+                  fullWidth
+                />
+
+                <ControlledAutocomplete
+                  name="role.id"
+                  fullWidth
+                  disablePortal
+                  disableClearable={true}
+                  options={generateRoleOptions(roles)}
+                  renderInput={(params) => (
+                    <MuiTextField
+                      {...params}
+                      label={formatMessage('userForm.role')}
+                    />
+                  )}
+                  loading={rolesLoading}
+                />
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={loading}
+                >
+                  {formatMessage('editUser.submit')}
+                </LoadingButton>
+              </Stack>
+            </Form>
+          )}
         </Grid>
       </Grid>
     </Container>