diff --git a/openbas-front/src/admin/components/Dashboard.tsx b/openbas-front/src/admin/components/Dashboard.tsx
index a22e30cdd8..5a216816fa 100644
--- a/openbas-front/src/admin/components/Dashboard.tsx
+++ b/openbas-front/src/admin/components/Dashboard.tsx
@@ -69,6 +69,7 @@ const Dashboard = () => {
   const dispatch = useAppDispatch();
 
   // Exercises
+  const [loadingExercises, setLoadingExercises] = useState(true);
   const [exercises, setExercises] = useState<EndpointStore[]>([]);
   const searchPaginationInput = {
     sorts: initSorting('exercise_updated_at', 'DESC'),
@@ -76,10 +77,11 @@ const Dashboard = () => {
     size: 6,
   };
   useEffect(() => {
+    setLoadingExercises(true);
     searchExercises(searchPaginationInput).then((result: { data: Page<ExerciseSimple> }) => {
       const { data } = result;
       setExercises(data.content);
-    });
+    }).finally(() => setLoadingExercises(false));
   }, []);
 
   // Statistics
@@ -278,6 +280,7 @@ const Dashboard = () => {
             exercises={exercises}
             hasHeader={false}
             variant="reduced-view"
+            loading={loadingExercises}
           />
         </Paper>
       </Grid>
diff --git a/openbas-front/src/admin/components/atomic_testings/InjectDtoList.tsx b/openbas-front/src/admin/components/atomic_testings/InjectDtoList.tsx
index 48ba77899b..b986b6e9a9 100644
--- a/openbas-front/src/admin/components/atomic_testings/InjectDtoList.tsx
+++ b/openbas-front/src/admin/components/atomic_testings/InjectDtoList.tsx
@@ -1,3 +1,4 @@
+import { HelpOutlineOutlined } from '@mui/icons-material';
 import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { CSSProperties, FunctionComponent, useMemo, useState } from 'react';
@@ -12,6 +13,7 @@ import Empty from '../../../components/Empty';
 import { useFormatter } from '../../../components/i18n';
 import ItemStatus from '../../../components/ItemStatus';
 import ItemTargets from '../../../components/ItemTargets';
+import PaginatedListLoader from '../../../components/PaginatedListLoader';
 import type { InjectResultDTO, SearchPaginationInput } from '../../../utils/api-types';
 import { isNotEmptyField } from '../../../utils/utils';
 import InjectIcon from '../common/injects/InjectIcon';
@@ -82,6 +84,8 @@ const InjectDtoList: FunctionComponent<Props> = ({
   const classes = useStyles();
   const { t, fldt, tPick, nsdt } = useFormatter();
 
+  const [loading, setLoading] = useState<boolean>(true);
+
   // Filter and sort hook
   const [injects, setInjects] = useState<InjectResultDTO[]>([]);
 
@@ -152,10 +156,15 @@ const InjectDtoList: FunctionComponent<Props> = ({
     },
   ], []);
 
+  const search = (input: SearchPaginationInput) => {
+    setLoading(true);
+    return fetchInjects(input).finally(() => setLoading(false));
+  };
+
   return (
     <>
       <PaginationComponentV2
-        fetch={fetchInjects}
+        fetch={search}
         searchPaginationInput={searchPaginationInput}
         setContent={setInjects}
         entityPrefix="inject"
@@ -180,57 +189,61 @@ const InjectDtoList: FunctionComponent<Props> = ({
             )}
           />
         </ListItem>
-        {injects.map((injectDto) => {
-          return (
-            <ListItem
-              key={injectDto.inject_id}
-              classes={{ root: classes.item }}
-              divider
-              secondaryAction={(
-                <AtomicTestingPopover
-                  atomic={injectDto}
-                  actions={['Duplicate', 'Delete']}
-                  onDelete={result => setInjects(injects.filter(e => (e.inject_id !== result)))}
-                  inList
-                />
-              )}
-              disablePadding
-            >
-              <ListItemButton
-                component={Link}
-                to={goTo(injectDto.inject_id)}
-              >
-                <ListItemIcon>
-                  <InjectIcon
-                    isPayload={isNotEmptyField(injectDto.inject_injector_contract?.injector_contract_payload)}
-                    type={
-                      injectDto.inject_injector_contract?.injector_contract_payload
-                        ? injectDto.inject_injector_contract.injector_contract_payload.payload_collector_type
-                        || injectDto.inject_injector_contract.injector_contract_payload.payload_type
-                        : injectDto.inject_type
-                    }
-                    variant="list"
-                  />
-                </ListItemIcon>
-                <ListItemText
-                  primary={(
-                    <div className={classes.bodyItems}>
-                      {headers.map(header => (
-                        <div
-                          key={header.field}
-                          className={classes.bodyItem}
-                          style={inlineStyles[header.field]}
-                        >
-                          {header.value?.(injectDto)}
-                        </div>
-                      ))}
-                    </div>
+        {
+          loading
+            ? <PaginatedListLoader Icon={HelpOutlineOutlined} headers={headers} headerStyles={inlineStyles} />
+            : injects.map((injectDto, index) => {
+              return (
+                <ListItem
+                  key={injectDto.inject_id}
+                  classes={{ root: classes.item }}
+                  divider={injects.length !== index + 1}
+                  secondaryAction={(
+                    <AtomicTestingPopover
+                      atomic={injectDto}
+                      actions={['Duplicate', 'Delete']}
+                      onDelete={result => setInjects(injects.filter(e => (e.inject_id !== result)))}
+                      inList
+                    />
                   )}
-                />
-              </ListItemButton>
-            </ListItem>
-          );
-        })}
+                  disablePadding
+                >
+                  <ListItemButton
+                    component={Link}
+                    to={goTo(injectDto.inject_id)}
+                  >
+                    <ListItemIcon>
+                      <InjectIcon
+                        isPayload={isNotEmptyField(injectDto.inject_injector_contract?.injector_contract_payload)}
+                        type={
+                          injectDto.inject_injector_contract?.injector_contract_payload
+                            ? injectDto.inject_injector_contract.injector_contract_payload.payload_collector_type
+                            || injectDto.inject_injector_contract.injector_contract_payload.payload_type
+                            : injectDto.inject_type
+                        }
+                        variant="list"
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={(
+                        <div className={classes.bodyItems}>
+                          {headers.map(header => (
+                            <div
+                              key={header.field}
+                              className={classes.bodyItem}
+                              style={inlineStyles[header.field]}
+                            >
+                              {header.value?.(injectDto)}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              );
+            })
+        }
         {!injects ? (<Empty message={t('No data available')} />) : null}
       </List>
     </>
diff --git a/openbas-front/src/admin/components/scenarios/Scenarios.tsx b/openbas-front/src/admin/components/scenarios/Scenarios.tsx
index 7f234ae345..fe59bf321b 100644
--- a/openbas-front/src/admin/components/scenarios/Scenarios.tsx
+++ b/openbas-front/src/admin/components/scenarios/Scenarios.tsx
@@ -20,9 +20,10 @@ import { useFormatter } from '../../../components/i18n';
 import ItemCategory from '../../../components/ItemCategory';
 import ItemSeverity from '../../../components/ItemSeverity';
 import ItemTags from '../../../components/ItemTags';
+import PaginatedListLoader from '../../../components/PaginatedListLoader';
 import PlatformIcon from '../../../components/PlatformIcon';
 import { useHelper } from '../../../store';
-import type { FilterGroup } from '../../../utils/api-types';
+import type { FilterGroup, SearchPaginationInput } from '../../../utils/api-types';
 import ImportUploaderScenario from './ImportUploaderScenario';
 import ScenarioPopover from './scenario/ScenarioPopover';
 import ScenarioStatus from './scenario/ScenarioStatus';
@@ -77,6 +78,8 @@ const Scenarios = () => {
   const classes = useStyles();
   const { t, nsdt } = useFormatter();
 
+  const [loading, setLoading] = useState<boolean>(true);
+
   // Fetching data
   const { userAdmin } = useHelper((helper: TagHelper & UserHelper) => ({
     userAdmin: helper.getMe()?.user_admin ?? false,
@@ -192,11 +195,16 @@ const Scenarios = () => {
     exportFileName: `${t('Scenarios')}.csv`,
   };
 
+  const search = (input: SearchPaginationInput) => {
+    setLoading(true);
+    return searchScenarios(input).finally(() => setLoading(false));
+  };
+
   return (
     <>
       <Breadcrumbs variant="list" elements={[{ label: t('Scenarios'), current: true }]} />
       <PaginationComponentV2
-        fetch={searchScenarios}
+        fetch={search}
         searchPaginationInput={searchPaginationInput}
         setContent={setScenarios}
         entityPrefix="scenario"
@@ -227,48 +235,52 @@ const Scenarios = () => {
             )}
           />
         </ListItem>
-        {scenarios.map((scenario: ScenarioStore) => {
-          return (
-            <ListItem
-              key={scenario.scenario_id}
-              divider
-              secondaryAction={(
-                <ScenarioPopover
-                  scenario={scenario}
-                  actions={['Duplicate', 'Export', 'Delete']}
-                  onDelete={result => setScenarios(scenarios.filter(e => (e.scenario_id !== result)))}
-                  inList
-                />
-              )}
-              disablePadding
-            >
-              <ListItemButton
-                component={Link}
-                to={`/admin/scenarios/${scenario.scenario_id}`}
-                classes={{ root: classes.item }}
-              >
-                <ListItemIcon>
-                  <MovieFilterOutlined color="primary" />
-                </ListItemIcon>
-                <ListItemText
-                  primary={(
-                    <div className={classes.bodyItems}>
-                      {headers.map(header => (
-                        <div
-                          key={header.field}
-                          className={classes.bodyItem}
-                          style={inlineStyles[header.field]}
-                        >
-                          {header.value(scenario)}
-                        </div>
-                      ))}
-                    </div>
+        {
+          loading
+            ? <PaginatedListLoader Icon={MovieFilterOutlined} headers={headers} headerStyles={inlineStyles} />
+            : scenarios.map((scenario: ScenarioStore, index) => {
+              return (
+                <ListItem
+                  key={scenario.scenario_id}
+                  divider={scenarios.length !== index + 1}
+                  secondaryAction={(
+                    <ScenarioPopover
+                      scenario={scenario}
+                      actions={['Duplicate', 'Export', 'Delete']}
+                      onDelete={result => setScenarios(scenarios.filter(e => (e.scenario_id !== result)))}
+                      inList
+                    />
                   )}
-                />
-              </ListItemButton>
-            </ListItem>
-          );
-        })}
+                  disablePadding
+                >
+                  <ListItemButton
+                    component={Link}
+                    to={`/admin/scenarios/${scenario.scenario_id}`}
+                    classes={{ root: classes.item }}
+                  >
+                    <ListItemIcon>
+                      <MovieFilterOutlined color="primary" />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={(
+                        <div className={classes.bodyItems}>
+                          {headers.map(header => (
+                            <div
+                              key={header.field}
+                              className={classes.bodyItem}
+                              style={inlineStyles[header.field]}
+                            >
+                              {header.value(scenario)}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              );
+            })
+        }
       </List>
       {userAdmin && (
         <ScenarioCreation
diff --git a/openbas-front/src/admin/components/scenarios/scenario/Scenario.tsx b/openbas-front/src/admin/components/scenarios/scenario/Scenario.tsx
index cf9c8fac2e..1b2b8c0f39 100644
--- a/openbas-front/src/admin/components/scenarios/scenario/Scenario.tsx
+++ b/openbas-front/src/admin/components/scenarios/scenario/Scenario.tsx
@@ -235,6 +235,7 @@ const Scenario = ({ setOpenInstantiateSimulationAndStart }: { setOpenInstantiate
                 exercises={exercises}
                 queryableHelpers={queryableHelpers}
                 secondaryAction={secondaryAction}
+                loading={loadingScenarioExercises}
               />
             </Paper>
           </Grid>
diff --git a/openbas-front/src/admin/components/simulations/ExerciseList.tsx b/openbas-front/src/admin/components/simulations/ExerciseList.tsx
index 3e6302dcd5..cd1f14bcd1 100644
--- a/openbas-front/src/admin/components/simulations/ExerciseList.tsx
+++ b/openbas-front/src/admin/components/simulations/ExerciseList.tsx
@@ -12,6 +12,7 @@ import { Header } from '../../../components/common/SortHeadersList';
 import { useFormatter } from '../../../components/i18n';
 import ItemTags from '../../../components/ItemTags';
 import ItemTargets from '../../../components/ItemTargets';
+import PaginatedListLoader from '../../../components/PaginatedListLoader';
 import type { ExerciseSimple } from '../../../utils/api-types';
 import AtomicTestingResult from '../atomic_testings/atomic_testing/AtomicTestingResult';
 import ExerciseStatus from './simulation/ExerciseStatus';
@@ -69,6 +70,7 @@ interface Props {
   hasHeader?: boolean;
   variant?: string;
   secondaryAction?: (exercise: ExerciseStore) => React.ReactNode;
+  loading: boolean;
 }
 
 const ExerciseList: FunctionComponent<Props> = ({
@@ -77,6 +79,7 @@ const ExerciseList: FunctionComponent<Props> = ({
   hasHeader = true,
   variant = 'list',
   secondaryAction,
+  loading,
 }) => {
   // Standard hooks
   const classes = useStyles();
@@ -161,39 +164,43 @@ const ExerciseList: FunctionComponent<Props> = ({
           />
         </ListItem>
       )}
-      {exercises.map((exercise: ExerciseStore, index) => (
-        <ListItem
-          key={exercise.exercise_id}
-          secondaryAction={secondaryAction && secondaryAction(exercise)}
-          disablePadding
-          divider={exercises.length !== index + 1}
-        >
-          <ListItemButton
-            classes={{ root: classes.item }}
-            component={Link}
-            to={`/admin/exercises/${exercise.exercise_id}`}
-          >
-            <ListItemIcon>
-              <HubOutlined color="primary" />
-            </ListItemIcon>
-            <ListItemText
-              primary={(
-                <div className={classes.bodyItems}>
-                  {headers.map(header => (
-                    <div
-                      key={header.field}
-                      className={classes.bodyItem}
-                      style={inlineStyles[header.field]}
-                    >
-                      {header.value?.(exercise)}
+      {
+        loading
+          ? <PaginatedListLoader Icon={HubOutlined} headers={headers} headerStyles={inlineStyles} />
+          : exercises.map((exercise: ExerciseStore, index) => (
+            <ListItem
+              key={exercise.exercise_id}
+              secondaryAction={secondaryAction && secondaryAction(exercise)}
+              disablePadding
+              divider={exercises.length !== index + 1}
+            >
+              <ListItemButton
+                classes={{ root: classes.item }}
+                component={Link}
+                to={`/admin/exercises/${exercise.exercise_id}`}
+              >
+                <ListItemIcon>
+                  <HubOutlined color="primary" />
+                </ListItemIcon>
+                <ListItemText
+                  primary={(
+                    <div className={classes.bodyItems}>
+                      {headers.map(header => (
+                        <div
+                          key={header.field}
+                          className={classes.bodyItem}
+                          style={inlineStyles[header.field]}
+                        >
+                          {header.value?.(exercise)}
+                        </div>
+                      ))}
                     </div>
-                  ))}
-                </div>
-              )}
-            />
-          </ListItemButton>
-        </ListItem>
-      ))}
+                  )}
+                />
+              </ListItemButton>
+            </ListItem>
+          ))
+      }
     </List>
   );
 };
diff --git a/openbas-front/src/admin/components/simulations/Exercises.tsx b/openbas-front/src/admin/components/simulations/Exercises.tsx
index c12681f645..a7e7187e14 100644
--- a/openbas-front/src/admin/components/simulations/Exercises.tsx
+++ b/openbas-front/src/admin/components/simulations/Exercises.tsx
@@ -14,7 +14,7 @@ import { buildSearchPagination } from '../../../components/common/queryable/Quer
 import { useQueryableWithLocalStorage } from '../../../components/common/queryable/useQueryableWithLocalStorage';
 import { useFormatter } from '../../../components/i18n';
 import { useHelper } from '../../../store';
-import type { FilterGroup } from '../../../utils/api-types';
+import type { FilterGroup, SearchPaginationInput } from '../../../utils/api-types';
 import type { EndpointStore } from '../assets/endpoints/Endpoint';
 import ExerciseList from './ExerciseList';
 import ImportUploaderExercise from './ImportUploaderExercise';
@@ -30,6 +30,7 @@ const Exercises = () => {
     userAdmin: helper.getMe()?.user_admin ?? false,
   }));
 
+  const [loading, setLoading] = useState<boolean>(true);
   const [exercises, setExercises] = useState<EndpointStore[]>([]);
 
   // Filters
@@ -79,11 +80,18 @@ const Exercises = () => {
     />
   );
 
+  const search = (input: SearchPaginationInput) => {
+    setLoading(true);
+    return searchExercises(input).finally(() => {
+      setLoading(false);
+    });
+  };
+
   return (
     <>
       <Breadcrumbs variant="list" elements={[{ label: t('Simulations'), current: true }]} />
       <PaginationComponentV2
-        fetch={searchExercises}
+        fetch={search}
         searchPaginationInput={searchPaginationInput}
         setContent={setExercises}
         entityPrefix="exercise"
@@ -100,6 +108,7 @@ const Exercises = () => {
         exercises={exercises}
         queryableHelpers={queryableHelpers}
         secondaryAction={secondaryAction}
+        loading={loading}
       />
       {userAdmin && <ExerciseCreation />}
     </>
diff --git a/openbas-front/src/admin/components/simulations/simulation/overview/ExerciseDistribution.tsx b/openbas-front/src/admin/components/simulations/simulation/overview/ExerciseDistribution.tsx
index 04622b5a12..b896a7833e 100644
--- a/openbas-front/src/admin/components/simulations/simulation/overview/ExerciseDistribution.tsx
+++ b/openbas-front/src/admin/components/simulations/simulation/overview/ExerciseDistribution.tsx
@@ -69,10 +69,6 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
     injectExpectations: helper.getExerciseInjectExpectations(exerciseId),
   }));
 
-  if (loading) {
-    return <Loader />;
-  }
-
   if (exercise.exercise_status === 'SCHEDULED' && injectExpectations?.length === 0 && !isReport) {
     return (
       <div style={{ marginTop: 100, textAlign: 'center' }}>
@@ -83,9 +79,7 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
       </div>
     );
   }
-  if (injectExpectations?.length === 0) {
-    return <div />;
-  }
+
   return (
     <Grid id="exercise_distribution" container={true} spacing={3}>
       <Grid item xs={6} style={{ marginTop: 25 }}>
@@ -93,7 +87,11 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Distribution of score by team (in % of expectations)')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreByTeamInPercentage exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreByTeamInPercentage exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={6} style={{ marginTop: 25 }}>
@@ -101,7 +99,11 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Teams scores over time (in % of expectations)')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreOverTimeByTeamInPercentage exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreOverTimeByTeamInPercentage exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={6} style={{ marginTop: 25 }}>
@@ -109,13 +111,21 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Distribution of total score by team')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreByTeam exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreByTeam exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={6} style={{ marginTop: 25 }}>
         <Typography variant="h4">{t('Teams scores over time')}</Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreOverTimeByTeam exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreOverTimeByTeam exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={6} style={{ marginTop: 25 }}>
@@ -123,7 +133,11 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Distribution of total score by inject type')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionByInjectorContract exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionByInjectorContract exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={6} style={{ marginTop: 25 }}>
@@ -131,7 +145,11 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Inject types scores over time')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreOverTimeByInjectorContract exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreOverTimeByInjectorContract exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={6} style={{ marginTop: 25 }}>
@@ -139,7 +157,11 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Distribution of total score by organization')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreByOrganization exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreByOrganization exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={3} style={{ marginTop: 25 }}>
@@ -147,7 +169,11 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Distribution of total score by player')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreByPlayer exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreByPlayer exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
       <Grid item xs={3} style={{ marginTop: 25 }}>
@@ -155,7 +181,11 @@ const ExerciseDistribution: FunctionComponent<Props> = ({
           {t('Distribution of total score by inject')}
         </Typography>
         <Paper variant="outlined" classes={{ root: classes.paperChart }}>
-          <ExerciseDistributionScoreByInject exerciseId={exerciseId} />
+          {
+            loading
+              ? <Loader variant="inline" />
+              : <ExerciseDistributionScoreByInject exerciseId={exerciseId} />
+          }
         </Paper>
       </Grid>
     </Grid>
diff --git a/openbas-front/src/components/PaginatedListLoader.tsx b/openbas-front/src/components/PaginatedListLoader.tsx
new file mode 100644
index 0000000000..2fe7f342f5
--- /dev/null
+++ b/openbas-front/src/components/PaginatedListLoader.tsx
@@ -0,0 +1,71 @@
+import { MoreVert } from '@mui/icons-material';
+import {
+  IconButton,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Skeleton,
+  SvgIconProps,
+} from '@mui/material';
+import { ComponentType, CSSProperties, FunctionComponent } from 'react';
+
+import { Header } from './common/SortHeadersList';
+
+interface Props {
+  headers: Header[];
+  headerStyles: Record<string, CSSProperties>;
+  Icon: ComponentType<SvgIconProps>;
+  height?: number;
+  number?: number;
+}
+
+const PaginatedListLoader: FunctionComponent<Props> = ({
+  headers,
+  headerStyles,
+  Icon,
+  height = 50,
+  number = 21,
+}) => {
+  return (
+    [...Array(number)].map((_, key) => (
+      <ListItem
+        key={key}
+        disablePadding
+        divider
+        secondaryAction={(
+          <IconButton
+            size="large"
+            disabled
+          >
+            <MoreVert fontSize="small" color="disabled" />
+          </IconButton>
+        )}
+      >
+        <ListItemButton
+          style={{ height, pointerEvents: 'none' }}
+        >
+          <ListItemIcon>
+            <Icon color="disabled" />
+          </ListItemIcon>
+          <ListItemText
+            primary={(
+              <div style={{ display: 'flex' }}>
+                {headers.map(header => (
+                  <div
+                    key={header.field}
+                    style={{ ...headerStyles[header.field], paddingRight: 10 }}
+                  >
+                    <Skeleton height={40} />
+                  </div>
+                ))}
+              </div>
+            )}
+          />
+        </ListItemButton>
+      </ListItem>
+    ))
+  );
+};
+
+export default PaginatedListLoader;
diff --git a/openbas-front/src/components/common/queryable/filter/FilterChips.tsx b/openbas-front/src/components/common/queryable/filter/FilterChips.tsx
index f27a18dcce..bb4c68022d 100644
--- a/openbas-front/src/components/common/queryable/filter/FilterChips.tsx
+++ b/openbas-front/src/components/common/queryable/filter/FilterChips.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import { Fragment, FunctionComponent } from 'react';
+import { Fragment, FunctionComponent, useCallback } from 'react';
 
 import type { Filter, FilterGroup, PropertySchemaDTO } from '../../../../utils/api-types';
 import ClickableModeChip from '../../chips/ClickableModeChip';
@@ -23,9 +23,9 @@ const FilterChips: FunctionComponent<Props> = ({
 }) => {
   const filters = filterGroup?.filters?.filter(f => availableFilterNames.length === 0 || availableFilterNames.includes(f.key)) ?? [];
 
-  const propertySchema = (filter: Filter) => {
+  const propertySchema = useCallback((filter: Filter) => {
     return propertySchemas.find(p => p.schema_property_name === filter.key);
-  };
+  }, [propertySchemas]);
 
   const handleSwitchMode = () => helpers.handleSwitchMode();
 
@@ -40,6 +40,7 @@ const FilterChips: FunctionComponent<Props> = ({
         display: 'flex',
         flexWrap: 'wrap',
         gap: 1,
+        minHeight: 56,
       }}
     >
       {filters.map((filter, idx) => {