From 65713bc78fbf4ef6c2fd8e81b1c2e4e4d7990350 Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Mon, 28 Feb 2022 17:20:47 +0100
Subject: [PATCH] style: add className for SearchField

---
 .../ProjectFeatureToggles/ProjectFeatureToggles.tsx      | 9 +++++----
 .../src/component/project/Project/ProjectOverview.tsx    | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index e7c5950c9c..b356ebf8a1 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -17,13 +17,14 @@ import { getCreateTogglePath } from 'utils/route-path-helpers';
 import { useStyles } from './ProjectFeatureToggles.styles';
 import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import classnames from 'classnames';
 
 interface IProjectFeatureToggles {
     features: IFeatureToggleListItem[];
     loading: boolean;
 }
 
-const ProjectFeatureToggles = ({
+export const ProjectFeatureToggles = ({
     features,
     loading,
 }: IProjectFeatureToggles) => {
@@ -55,7 +56,9 @@ const ProjectFeatureToggles = ({
                             <SearchField
                                 initialValue={filter}
                                 updateValue={setFilter}
-                                className={styles.search}
+                                className={classnames(styles.search, {
+                                    skeleton: loading,
+                                })}
                             />
                             <ConditionallyRender
                                 condition={PROJECTFILTERING}
@@ -129,5 +132,3 @@ const ProjectFeatureToggles = ({
         </PageContent>
     );
 };
-
-export default ProjectFeatureToggles;
diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
index de4564da79..a61d8c7481 100644
--- a/frontend/src/component/project/Project/ProjectOverview.tsx
+++ b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -1,5 +1,5 @@
 import useProject from '../../../hooks/api/getters/useProject/useProject';
-import ProjectFeatureToggles from './ProjectFeatureToggles/ProjectFeatureToggles';
+import { ProjectFeatureToggles } from './ProjectFeatureToggles/ProjectFeatureToggles';
 import ProjectInfo from './ProjectInfo/ProjectInfo';
 import { useStyles } from './Project.styles';