From 7da3573edb32e64c1258c1bd35a496c9fbc0ac8f Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Fri, 8 Oct 2021 16:19:06 +0200
Subject: [PATCH] Feat/visual enhancements (#404)

* fix: stale style

* fix: execution plan styling

* fix: paths

* fix: remove console logs

* fix: snapshots

* fix: add comma

* fix: update snapshots
---
 frontend/src/assets/icons/dots.svg            | 16 +++++++++++
 .../PercentageCircle/PercentageCircle.tsx     | 11 ++++++--
 .../FeatureEnvironmentMetrics.tsx             | 22 ++++++++-------
 .../FeatureOverview/FeatureOverview.tsx       |  4 +--
 .../FeatureOverviewMetaData.tsx               | 10 ++++---
 .../FeatureOverviewStale.styles.ts            | 12 +++++++++
 .../FeatureOverviewStale.tsx                  | 27 ++++++++++++-------
 .../FeatureOverviewEnvironment.tsx            |  1 +
 .../FeatureOverviewStrategyCard.tsx           |  8 +++---
 .../FeatureOverviewStrategies.tsx             |  4 ++-
 .../AddTagDialog/AddTagDialog.tsx             |  3 ++-
 .../FeatureOverviewTags.tsx                   |  8 ++++--
 ...tureEnvironmentStrategyExecution.styles.ts |  3 ++-
 .../FeatureStrategiesConfigure.tsx            | 11 ++++++--
 ...FeatureStrategiesEnvironmentList.styles.ts |  4 +--
 .../FeatureStrategiesEnvironments.tsx         |  1 -
 .../FeatureStrategiesProductionGuard.tsx      |  3 +++
 .../FeatureStrategyEditable.tsx               |  4 +++
 .../FeatureStrategyCreateExecution.styles.ts  |  3 ++-
 .../FeatureStrategyExecution.styles.ts        |  1 -
 .../FeatureStrategyExecution.tsx              |  5 +++-
 ...atureStrategyExecutionConstraint.styles.ts |  2 +-
 .../feature/FeatureView2/FeatureView2.tsx     | 20 +++++++++-----
 .../FeatureViewEnvironment.tsx                |  9 ++++---
 .../actions/useFeatureApi/useFeatureApi.ts    | 15 ++++++-----
 25 files changed, 147 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/assets/icons/dots.svg

diff --git a/frontend/src/assets/icons/dots.svg b/frontend/src/assets/icons/dots.svg
new file mode 100644
index 0000000000..1bec57b922
--- /dev/null
+++ b/frontend/src/assets/icons/dots.svg
@@ -0,0 +1,16 @@
+<svg
+    id="dots"
+    width="50px"
+    height="21px"
+    viewBox="0 0 132 58"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <g stroke="none" fill="none">
+    <g id="chatbot-loader" fill="#fff">
+    <circle id="chatbot-loader-dot1" cx="25" cy="30" r="13"></circle>
+    <circle id="chatbot-loader-dot2" cx="65" cy="30" r="13"></circle>
+    <circle id="chatbot-loader-dot3" cx="105" cy="30" r="13"></circle>
+    </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
index de9d8930e4..7d91220fe7 100644
--- a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
+++ b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
@@ -3,9 +3,14 @@ import { useTheme } from '@material-ui/core';
 interface IPercentageCircleProps {
     styles?: object;
     percentage: number;
+    secondaryPieColor?: string;
 }
 
-const PercentageCircle = ({ styles, percentage }: IPercentageCircleProps) => {
+const PercentageCircle = ({
+    styles,
+    percentage,
+    secondaryPieColor,
+}: IPercentageCircleProps) => {
     const theme = useTheme();
 
     let circle = {
@@ -14,7 +19,9 @@ const PercentageCircle = ({ styles, percentage }: IPercentageCircleProps) => {
         borderRadius: '50%',
         color: '#fff',
         backgroundColor: theme.palette.grey[200],
-        backgroundImage: `conic-gradient(${theme.palette.primary.main} ${percentage}%, ${theme.palette.grey[200]} 1%)`,
+        backgroundImage: `conic-gradient(${
+            theme.palette.primary.main
+        } ${percentage}%, ${secondaryPieColor || theme.palette.grey[200]} 1%)`,
     };
 
     if (percentage === 100) {
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx
index cb06d739b2..08dbc95086 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx
@@ -51,18 +51,20 @@ const FeatureEnvironmentMetrics = ({
         return (
             <div className={containerClasses}>
                 <div className={styles.headerContainer}>
-                    <h2 className={styles.title}>Traffic in {metric.name}</h2>
+                    <h2 data-loading className={styles.title}>
+                        Traffic in {metric.name}
+                    </h2>
                 </div>
 
                 <div className={styles.bodyContainer}>
                     <div className={styles.textContainer}>
-                        <p className={styles.paragraph}>
+                        <p className={styles.paragraph} data-loading>
                             No metrics available for this environment.
                         </p>
                     </div>
 
                     <div className={styles.chartContainer}>
-                        <PieChartIcon className={styles.icon} />
+                        <PieChartIcon className={styles.icon} data-loading />
                     </div>
                 </div>
             </div>
@@ -72,30 +74,32 @@ const FeatureEnvironmentMetrics = ({
     return (
         <div className={containerClasses}>
             <div className={styles.headerContainer}>
-                <h2 className={styles.title}>Traffic in {metric.name}</h2>
+                <h2 data-loading className={styles.title}>
+                    Traffic in {metric.name}
+                </h2>
             </div>
 
             <div className={styles.bodyContainer}>
                 <div className={styles.textContainer}>
                     <div className={styles.trueCountContainer}>
                         <div>
-                            <div className={styles.trueCount} />
+                            <div className={styles.trueCount} data-loading />
                         </div>
-                        <p className={styles.paragraph}>
+                        <p className={styles.paragraph} data-loading>
                             {metric.yes} users received this feature
                         </p>
                     </div>
 
                     <div className={styles.trueCountContainer}>
                         <div>
-                            <div className={styles.falseCount} />
+                            <div className={styles.falseCount} data-loading />
                         </div>
-                        <p className={styles.paragraph}>
+                        <p className={styles.paragraph} data-loading>
                             {metric.no} users did not receive this feature
                         </p>
                     </div>
                 </div>
-                <div className={styles.chartContainer}>
+                <div className={styles.chartContainer} data-loading>
                     <PercentageCircle
                         percentage={calculatePercentage()}
                         styles={{
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverview.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverview.tsx
index e4fc9b8f10..08d8215e09 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverview.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverview.tsx
@@ -18,9 +18,9 @@ const FeatureOverview = () => {
             </div>
             <div className={styles.mainContent}>
                 <div className={styles.trafficContainer}>
-                    <FeatureOverviewMetrics />
+                    <FeatureOverviewMetrics data-loading />
                 </div>
-                <FeatureOverviewStrategies />
+                <FeatureOverviewStrategies data-loading />
             </div>
         </div>
     );
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index 8339296409..87d2d7f9fc 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -22,18 +22,20 @@ const FeatureOverviewMetaData = () => {
 
     return (
         <div className={classnames(styles.container)}>
-            <div className={styles.metaDataHeader}>
+            <div className={styles.metaDataHeader} data-loading>
                 <IconComponent className={styles.headerIcon} />{' '}
                 <h3 className={styles.header}>
                     {capitalize(type || '')} toggle
                 </h3>
             </div>
             <div className={styles.body}>
-                <span className={styles.bodyItem}>Project: {project}</span>
+                <span className={styles.bodyItem} data-loading>
+                    Project: {project}
+                </span>
                 <ConditionallyRender
                     condition={description}
                     show={
-                        <span className={styles.bodyItem}>
+                        <span className={styles.bodyItem} data-loading>
                             <div>Description:</div>
                             <div className={styles.descriptionContainer}>
                                 <p>{description}</p>
@@ -47,7 +49,7 @@ const FeatureOverviewMetaData = () => {
                         </span>
                     }
                     elseShow={
-                        <span>
+                        <span data-loading>
                             <div className={styles.descriptionContainer}>
                                 No description.{' '}
                                 <IconButton
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.styles.ts
index 86c2ccb450..082f3c31f0 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.styles.ts
@@ -17,6 +17,16 @@ export const useStyles = makeStyles(theme => ({
             maxWidth: 'none',
         },
     },
+    status: {
+        height: '12.5px',
+        width: '12.5px',
+        backgroundColor: theme.palette.success.main,
+        borderRadius: '50%',
+        marginLeft: '0.5rem',
+    },
+    statusStale: {
+        backgroundColor: theme.palette.error.main,
+    },
     staleHeaderContainer: {
         display: 'flex',
         alignItems: 'center',
@@ -41,6 +51,8 @@ export const useStyles = makeStyles(theme => ({
     bodyItem: {
         margin: '0.5rem 0',
         fontSize: theme.fontSizes.bodySize,
+        display: 'flex',
+        alignItems: 'center',
     },
     headerIcon: {
         marginRight: '1rem',
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.tsx
index 1506313866..841a822ac0 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStale/FeatureOverviewStale.tsx
@@ -3,11 +3,11 @@ import classnames from 'classnames';
 import useFeature from '../../../../../hooks/api/getters/useFeature/useFeature';
 import { useParams } from 'react-router-dom';
 import { IFeatureViewParams } from '../../../../../interfaces/params';
-import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_FEATURE } from '../../../../AccessProvider/permissions';
-import { Check, Close } from '@material-ui/icons';
 import { useState } from 'react';
 import StaleDialog from './StaleDialog/StaleDialog';
+import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
+import classNames from 'classnames';
 
 const FeatureOverviewStale = () => {
     const styles = useStyles();
@@ -15,27 +15,36 @@ const FeatureOverviewStale = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { feature } = useFeature(projectId, featureId);
 
-    const FlipStateButton = () => (feature.stale ? <Close /> : <Check />);
+    const flipStateButtonText = () =>
+        feature.stale ? 'Set to active' : 'Set to stale';
+
+    const statusClasses = classNames(styles.status, {
+        [styles.statusStale]: feature.stale,
+    });
 
     return (
         <div className={classnames(styles.container)}>
             <div className={styles.staleHeaderContainer}>
                 <div className={styles.staleHeader}>
-                    <h3 className={styles.header}>Status</h3>
+                    <h3 className={styles.header} data-loading>
+                        Status
+                    </h3>
                 </div>
             </div>
             <div className={styles.body}>
-                <span className={styles.bodyItem}>
+                <span className={styles.bodyItem} data-loading>
                     Feature is {feature.stale ? 'stale' : 'active'}
+                    <div className={statusClasses} />
                 </span>
-                <div className={styles.staleButton}>
-                    <PermissionIconButton
+                <div className={styles.staleButton} data-loading>
+                    <PermissionButton
                         onClick={() => setOpenStaleDialog(true)}
                         permission={UPDATE_FEATURE}
                         tooltip="Flip status"
+                        variant="text"
                     >
-                        <FlipStateButton />
-                    </PermissionIconButton>
+                        {flipStateButtonText()}
+                    </PermissionButton>
                 </div>
             </div>
             <StaleDialog
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index fbdc71de0d..6d1f307b88 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -31,6 +31,7 @@ const FeatureOverviewEnvironment = ({
         return strategies.map(strategy => {
             return (
                 <FeatureOverviewStrategyCard
+                    data-loading
                     strategy={strategy}
                     key={strategy.id}
                     onClick={handleClick}
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewStrategyCard/FeatureOverviewStrategyCard.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewStrategyCard/FeatureOverviewStrategyCard.tsx
index 58d927eccc..a3398ca471 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewStrategyCard/FeatureOverviewStrategyCard.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewEnvironment/FeatureOverviewStrategyCard/FeatureOverviewStrategyCard.tsx
@@ -24,13 +24,15 @@ const FeatureOverviewStrategyCard = ({
     const { parameters } = strategy;
     return (
         <button className={styles.card} onClick={onClick}>
-            <Icon className={styles.icon} />
-            <p className={styles.cardHeader}>{strategyName}</p>
+            <Icon className={styles.icon} data-loading />
+            <p data-loading className={styles.cardHeader}>
+                {strategyName}
+            </p>
 
             <ConditionallyRender
                 condition={Boolean(parameters?.rollout) && !smallScreen}
                 show={
-                    <p className={styles.rollout}>
+                    <p className={styles.rollout} data-loading>
                         Rolling out to {parameters?.rollout}%
                     </p>
                 }
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewStrategies.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewStrategies.tsx
index d4d8e5cedb..981016befe 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewStrategies.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewStrategies/FeatureOverviewStrategies.tsx
@@ -26,7 +26,9 @@ const FeatureOverviewStrategies = () => {
         <div className={styles.container}>
             <div className={styles.headerContainer}>
                 <div className={styles.headerInnerContainer}>
-                    <h3 className={styles.headerTitle}>Toggle Strategies</h3>
+                    <h3 className={styles.headerTitle} data-loading>
+                        Toggle Strategies
+                    </h3>
                     <div className={styles.actions}>
                         <ResponsiveButton
                             maxWidth="700px"
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/AddTagDialog/AddTagDialog.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/AddTagDialog/AddTagDialog.tsx
index c8e60430b2..9ea1d23e70 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/AddTagDialog/AddTagDialog.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/AddTagDialog/AddTagDialog.tsx
@@ -27,7 +27,7 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
     const DEFAULT_TAG: IDefaultTag = { type: 'simple', value: '' };
     const styles = useStyles();
     const { featureId } = useParams<IFeatureViewParams>();
-    const { addTagToFeature } = useFeatureApi();
+    const { addTagToFeature, loading } = useFeatureApi();
     const { refetch } = useTags(featureId);
     const [errors, setErrors] = useState({ tagError: '' });
     const { toast, setToastData } = useToast();
@@ -74,6 +74,7 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
                 primaryButtonText="Add tag"
                 title="Add tags to feature toggle"
                 onClick={onSubmit}
+                disabledPrimaryButton={loading}
                 onClose={onCancel}
             >
                 <>
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/FeatureOverviewTags.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/FeatureOverviewTags.tsx
index fd8c0729bb..6b1b033679 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/FeatureOverviewTags.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewTags/FeatureOverviewTags.tsx
@@ -99,6 +99,7 @@ const FeatureOverviewTags = () => {
         <Chip
             icon={tagIcon(t.type)}
             className={styles.tagChip}
+            data-loading
             label={t.value}
             key={`${t.type}:${t.value}`}
             onDelete={() => {
@@ -112,7 +113,9 @@ const FeatureOverviewTags = () => {
         <div className={styles.container}>
             <div className={styles.tagheaderContainer}>
                 <div className={styles.tagHeader}>
-                    <h4 className={styles.tagHeaderText}>Tags</h4>
+                    <h4 className={styles.tagHeaderText} data-loading>
+                        Tags
+                    </h4>
                 </div>
 
                 <AddTagDialog open={openTagDialog} setOpen={setOpenTagDialog} />
@@ -120,6 +123,7 @@ const FeatureOverviewTags = () => {
                     onClick={() => setOpenTagDialog(true)}
                     permission={UPDATE_FEATURE}
                     tooltip="Add tag"
+                    data-loading
                 >
                     <Add />
                 </PermissionIconButton>
@@ -143,7 +147,7 @@ const FeatureOverviewTags = () => {
                 <ConditionallyRender
                     condition={tags.length > 0}
                     show={tags.map(renderTag)}
-                    elseShow={<p>No tags to display</p>}
+                    elseShow={<p data-loading>No tags to display</p>}
                 />
             </div>
             {toast}
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureEnvironmentStrategyExecution/FeatureEnvironmentStrategyExecution.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureEnvironmentStrategyExecution/FeatureEnvironmentStrategyExecution.styles.ts
index e36ba867fc..3fe2021802 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureEnvironmentStrategyExecution/FeatureEnvironmentStrategyExecution.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureEnvironmentStrategyExecution/FeatureEnvironmentStrategyExecution.styles.ts
@@ -9,9 +9,10 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
+        backgroundColor: theme.palette.grey[100],
     },
     header: {
-        color: theme.palette.primary.main,
+        color: theme.palette.grey[700],
         textAlign: 'center',
         margin: '0.5rem 0',
         fontSize: theme.fontSizes.bodySize,
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesConfigure/FeatureStrategiesConfigure.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesConfigure/FeatureStrategiesConfigure.tsx
index 4b6697c2b3..c44bb5c688 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesConfigure/FeatureStrategiesConfigure.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesConfigure/FeatureStrategiesConfigure.tsx
@@ -48,7 +48,7 @@ const FeatureStrategiesConfigure = ({
     const [strategyParams, setStrategyParams] = useState(
         configureNewStrategy.parameters
     );
-    const { addStrategyToFeature } = useFeatureStrategyApi();
+    const { addStrategyToFeature, loading } = useFeatureStrategyApi();
 
     const handleCancel = () => {
         setConfigureNewStrategy(null);
@@ -71,6 +71,7 @@ const FeatureStrategiesConfigure = ({
         };
 
         try {
+            if (loading) return;
             const res = await addStrategyToFeature(
                 projectId,
                 featureId,
@@ -163,15 +164,21 @@ const FeatureStrategiesConfigure = ({
                     className={styles.btn}
                     onClick={resolveSubmit}
                     data-test={ADD_NEW_STRATEGY_SAVE_ID}
+                    disabled={loading}
                 >
                     Save
                 </Button>
-                <Button className={styles.btn} onClick={handleCancel}>
+                <Button
+                    className={styles.btn}
+                    onClick={handleCancel}
+                    disabled={loading}
+                >
                     Cancel
                 </Button>
             </div>
             <FeatureStrategiesProductionGuard
                 primaryButtonText="Save changes"
+                loading={loading}
                 show={productionGuard}
                 onClick={() => {
                     handleSubmit();
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList.styles.ts
index 2aab924370..dc2e2665f1 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList.styles.ts
@@ -10,9 +10,6 @@ export const useStyles = makeStyles(theme => ({
         backgroundColor: theme.palette.primary.light,
         opacity: '0.75',
     },
-    strategiesContainer: {
-        maxWidth: '627px',
-    },
     dropbox: {
         textAlign: 'center',
         fontSize: theme.fontSizes.smallBody,
@@ -39,5 +36,6 @@ export const useStyles = makeStyles(theme => ({
     },
     environmentList: {
         marginTop: 0,
+        marginBottom: 0,
     },
 }));
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
index d7f2be9f95..3e8fd7752a 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
@@ -59,7 +59,6 @@ const FeatureStrategiesEnvironments = () => {
         if (addStrategy) {
             setExpandedSidebar(true);
         }
-        console.log(feature);
         if (!feature) return;
 
         if (environmentTab) {
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard.tsx
index ca29679a46..265842f2cb 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard.tsx
@@ -6,6 +6,7 @@ interface IFeatureStrategiesProductionGuard {
     onClick: () => void;
     onClose: () => void;
     primaryButtonText: string;
+    loading: boolean;
 }
 
 const FeatureStrategiesProductionGuard = ({
@@ -13,6 +14,7 @@ const FeatureStrategiesProductionGuard = ({
     onClick,
     onClose,
     primaryButtonText,
+    loading,
 }: IFeatureStrategiesProductionGuard) => {
     return (
         <Dialogue
@@ -22,6 +24,7 @@ const FeatureStrategiesProductionGuard = ({
             secondaryButtonText="Cancel"
             onClick={onClick}
             onClose={onClose}
+            disabledPrimaryButton={loading}
         >
             <Alert severity="error">
                 WARNING. You are about to make changes to a production
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx
index 224958a91d..01152b4bd0 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx
@@ -23,6 +23,7 @@ import {
 } from '../../../../../../testIds';
 import AccessContext from '../../../../../../contexts/AccessContext';
 import { UPDATE_FEATURE } from '../../../../../AccessProvider/permissions';
+import useFeatureApi from '../../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
 
 interface IFeatureStrategyEditable {
     currentStrategy: IFeatureStrategy;
@@ -38,6 +39,7 @@ const FeatureStrategyEditable = ({
     index,
 }: IFeatureStrategyEditable) => {
     const { hasAccess } = useContext(AccessContext);
+    const { loading } = useFeatureApi();
 
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { activeEnvironment, featureCache, dirty, setDirty } = useContext(
@@ -171,12 +173,14 @@ const FeatureStrategyEditable = ({
                                     className={styles.editButton}
                                     onClick={updateFeatureStrategy}
                                     data-test={UPDATE_STRATEGY_BUTTON_ID}
+                                    disabled={loading}
                                 >
                                     Save changes
                                 </Button>
                                 <Button
                                     onClick={discardChanges}
                                     className={styles.editButton}
+                                    disabled={loading}
                                 >
                                     Discard changes
                                 </Button>
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyCreateExecution/FeatureStrategyCreateExecution.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyCreateExecution/FeatureStrategyCreateExecution.styles.ts
index 8176219b4a..25a0e446ee 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyCreateExecution/FeatureStrategyCreateExecution.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyCreateExecution/FeatureStrategyCreateExecution.styles.ts
@@ -10,9 +10,10 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
+        backgroundColor: theme.palette.grey[100],
     },
     header: {
-        color: theme.palette.primary.main,
+        color: theme.palette.grey[600],
         textAlign: 'center',
         margin: '0.5rem 0',
         fontSize: theme.fontSizes.bodySize,
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.styles.ts
index 250274505c..05a81fb95a 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.styles.ts
@@ -8,7 +8,6 @@ export const useStyles = makeStyles(theme => ({
         marginTop: '0.5rem',
         width: '100%',
     },
-
     constraint: {
         fontSize: theme.fontSizes.smallBody,
         alignItems: 'center;',
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.tsx
index 9f1e5938a6..3ca59f3bb9 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.tsx
@@ -70,7 +70,10 @@ const FeatureStrategyExecution = ({
                                 are included.
                             </p>
 
-                            <PercentageCircle percentage={parameters[key]} />
+                            <PercentageCircle
+                                percentage={parameters[key]}
+                                secondaryPieColor={'#fff'}
+                            />
                         </Fragment>
                     );
                 case 'userIds':
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecutionConstraint/FeatureStrategyExecutionConstraint.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecutionConstraint/FeatureStrategyExecutionConstraint.styles.ts
index b19cae9666..31f6bb0bdd 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecutionConstraint/FeatureStrategyExecutionConstraint.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecutionConstraint/FeatureStrategyExecutionConstraint.styles.ts
@@ -6,7 +6,7 @@ export const useStyles = makeStyles(theme => ({
         alignItems: 'center;',
         margin: '0.5rem 0',
         display: 'flex',
-        border: `1px solid ${theme.palette.grey[300]}`,
+        border: `1px solid ${theme.palette.grey[600]}`,
         padding: '0.2rem',
         borderRadius: '5px',
         width: '100%',
diff --git a/frontend/src/component/feature/FeatureView2/FeatureView2.tsx b/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
index 83cde19f3b..49851a7dd6 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
@@ -17,16 +17,18 @@ import FeatureStrategies from './FeatureStrategies/FeatureStrategies';
 import FeatureVariants from './FeatureVariants/FeatureVariants';
 import { useStyles } from './FeatureView2.styles';
 import FeatureSettings from './FeatureSettings/FeatureSettings';
+import useLoading from '../../../hooks/useLoading';
 
 const FeatureView2 = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
-    const { feature } = useFeature(projectId, featureId);
+    const { feature, loading } = useFeature(projectId, featureId);
     const { a11yProps } = useTabs(0);
     const { archiveFeatureToggle } = useFeatureApi();
     const { toast, setToastData } = useToast();
     const [showDelDialog, setShowDelDialog] = useState(false);
     const styles = useStyles();
     const history = useHistory();
+    const ref = useLoading(loading);
 
     const basePath = `/projects/${projectId}/features2/${featureId}`;
 
@@ -55,7 +57,7 @@ const FeatureView2 = () => {
     const tabData = [
         {
             title: 'Overview',
-            path: `${basePath}/overview`,
+            path: `${basePath}`,
             name: 'overview',
         },
         {
@@ -81,6 +83,7 @@ const FeatureView2 = () => {
         return tabData.map((tab, index) => {
             return (
                 <Tab
+                    data-loading
                     key={tab.title}
                     label={tab.title}
                     value={tab.path}
@@ -95,14 +98,17 @@ const FeatureView2 = () => {
     };
 
     return (
-        <>
+        <div ref={ref}>
             <div className={styles.header}>
                 <div className={styles.innerContainer}>
-                    <h2 className={styles.featureViewHeader}>{feature.name}</h2>
+                    <h2 className={styles.featureViewHeader} data-loading>
+                        {feature.name}
+                    </h2>
                     <div className={styles.actions}>
                         <PermissionIconButton
                             permission={UPDATE_FEATURE}
                             tooltip="Copy"
+                            data-loading
                             component={Link}
                             to={`${history.location.pathname}/copy`}
                         >
@@ -111,6 +117,7 @@ const FeatureView2 = () => {
                         <PermissionIconButton
                             permission={UPDATE_FEATURE}
                             tooltip="Archive feature toggle"
+                            data-loading
                             onClick={() => setShowDelDialog(true)}
                         >
                             <Archive />
@@ -130,7 +137,8 @@ const FeatureView2 = () => {
                 </div>
             </div>
             <Route
-                path={`/projects/:projectId/features2/:featureId/overview`}
+                exact
+                path={`/projects/:projectId/features2/:featureId`}
                 component={FeatureOverview}
             />
             <Route
@@ -164,7 +172,7 @@ const FeatureView2 = () => {
                 Are you sure you want to archive this feature toggle?
             </Dialogue>
             {toast}
-        </>
+        </div>
     );
 };
 
diff --git a/frontend/src/component/feature/FeatureView2/FeatureViewEnvironment/FeatureViewEnvironment.tsx b/frontend/src/component/feature/FeatureView2/FeatureViewEnvironment/FeatureViewEnvironment.tsx
index 5433a990ff..656e8cf3ee 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureViewEnvironment/FeatureViewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureViewEnvironment/FeatureViewEnvironment.tsx
@@ -96,19 +96,22 @@ const FeatureViewEnvironment: FC<IFeatureViewEnvironmentProps> = ({
 
     return (
         <div className={containerClasses}>
-            <div className={environmentIdentifierClasses}>
+            <div className={environmentIdentifierClasses} data-loading>
                 <div className={iconContainerClasses}>
                     <Cloud className={iconClasses} />
                 </div>
                 <p className={styles.environmentBadgeParagraph}>{env.type}</p>
             </div>
+
             <div className={styles.header}>
                 <div className={styles.headerInfo}>
                     <Tooltip title={env.name}>
-                        <p className={styles.environmentTitle}>{env.name}</p>
+                        <p data-loading className={styles.environmentTitle}>
+                            {env.name}
+                        </p>
                     </Tooltip>
                 </div>
-                <div className={styles.environmentStatus}>
+                <div className={styles.environmentStatus} data-loading>
                     <ConditionallyRender
                         condition={env?.strategies?.length > 0}
                         show={
diff --git a/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts b/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts
index 87fa316087..d8e521ca25 100644
--- a/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts
+++ b/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts
@@ -2,7 +2,7 @@ import { ITag } from '../../../../interfaces/tags';
 import useAPI from '../useApi/useApi';
 
 const useFeatureApi = () => {
-    const { makeRequest, createRequest, errors } = useAPI({
+    const { makeRequest, createRequest, errors, loading } = useAPI({
         propagateErrors: true,
     });
 
@@ -146,13 +146,13 @@ const useFeatureApi = () => {
     const cloneFeatureToggle = async (
         projectId: string,
         featureId: string,
-        payload: {name: string, replaceGroupId: boolean}
+        payload: { name: string; replaceGroupId: boolean }
     ) => {
         const path = `api/admin/projects/${projectId}/features/${featureId}/clone`;
-        const req = createRequest(
-            path,
-            { method: 'POST',  body: JSON.stringify(payload) },
-        );
+        const req = createRequest(path, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        });
 
         try {
             const res = await makeRequest(req.caller, req.id);
@@ -172,7 +172,8 @@ const useFeatureApi = () => {
         deleteTagFromFeature,
         archiveFeatureToggle,
         patchFeatureToggle,
-        cloneFeatureToggle
+        cloneFeatureToggle,
+        loading,
     };
 };