From 679f7c0ddaedd7ee1083f6f39bb2747f8de881aa Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 13:16:14 +0200
Subject: [PATCH 1/3] Chore: remove space, fix link

---
 frontend/src/component/personalDashboard/ConnectSDK.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/component/personalDashboard/ConnectSDK.tsx b/frontend/src/component/personalDashboard/ConnectSDK.tsx
index fe5d0b61df61..892169da988b 100644
--- a/frontend/src/component/personalDashboard/ConnectSDK.tsx
+++ b/frontend/src/component/personalDashboard/ConnectSDK.tsx
@@ -91,7 +91,6 @@ export const ExistingFlag: FC<{ project: string }> = ({ project }) => {
 export const ConnectSDK: FC<{ project: string }> = ({ project }) => {
     return (
         <ActionBox data-loading>
-            {' '}
             <TitleContainer>
                 <NeutralCircleContainer>2</NeutralCircleContainer>
                 Connect an SDK
@@ -104,7 +103,7 @@ export const ConnectSDK: FC<{ project: string }> = ({ project }) => {
                 </p>
             </div>
             <div>
-                <Button href={`projects/${project}`} variant='contained'>
+                <Button href={`/projects/${project}`} variant='contained'>
                     Go to project
                 </Button>
             </div>

From 8317738ea6dd9d96bb92530309f16d6b4ba10c24 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 13:29:17 +0200
Subject: [PATCH 2/3] fix: show empty chart when loading data

---
 .../personalDashboard/FlagMetricsChart.tsx    | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index 4921aa574776..0bb50dfc9dd6 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -24,6 +24,7 @@ import {
 } from './createChartOptions';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
+import useLoading from 'hooks/useLoading';
 
 const defaultYes = [0, 14, 28, 21, 33, 31, 31, 22, 26, 37, 31, 14, 21, 14, 0];
 
@@ -69,6 +70,31 @@ export const PlaceholderFlagMetricsChart: React.FC<{ label?: string }> = ({
     );
 };
 
+export const EmptyFlagMetricsChart = () => {
+    const theme = useTheme();
+
+    const options = useMemo(() => {
+        return createPlaceholderBarChartOptions(theme);
+    }, [theme]);
+
+    const data = useMemo(() => {
+        return {
+            labels: [],
+            datasets: [],
+        };
+    }, [theme]);
+
+    return (
+        <ChartWrapper>
+            <Bar
+                data={data}
+                options={options}
+                aria-label='A placeholder bar chart with a single feature flag exposure metrics'
+            />
+        </ChartWrapper>
+    );
+};
+
 const useMetricsEnvironments = (project: string, flagName: string) => {
     const [environment, setEnvironment] = useState<string | null>(null);
     const { feature } = useFeature(project, flagName);
@@ -96,7 +122,7 @@ const useFlagMetrics = (
     environment: string | null,
     hoursBack: number,
 ) => {
-    const { featureMetrics: metrics = [] } = useFeatureMetricsRaw(
+    const { featureMetrics: metrics = [], loading } = useFeatureMetricsRaw(
         flagName,
         hoursBack,
     );
@@ -126,7 +152,7 @@ const useFlagMetrics = (
         return createBarChartOptions(theme, hoursBack, locationSettings);
     }, [theme, hoursBack, locationSettings]);
 
-    return { data, options };
+    return { data, options, loading };
 };
 
 const EnvironmentSelect: FC<{
@@ -183,10 +209,17 @@ export const FlagMetricsChart: FC<{
     const { environment, setEnvironment, activeEnvironments } =
         useMetricsEnvironments(flag.project, flag.name);
 
-    const { data, options } = useFlagMetrics(flag.name, environment, hoursBack);
+    const { data, options, loading } = useFlagMetrics(
+        flag.name,
+        environment,
+        hoursBack,
+    );
 
     const noData = data.datasets[0].data.length === 0;
 
+    console.log('loading', loading);
+    const ref = useLoading(loading);
+
     return (
         <ChartContainer>
             <ExposureAndMetricsRow>
@@ -210,7 +243,9 @@ export const FlagMetricsChart: FC<{
                 </MetricsSelectors>
             </ExposureAndMetricsRow>
 
-            {noData ? (
+            {loading ? (
+                <EmptyFlagMetricsChart />
+            ) : noData ? (
                 <PlaceholderFlagMetricsChart />
             ) : (
                 <ChartWrapper>

From 3dc8f1a4b8667aff4ef8404824c5f47e84335931 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 13:34:16 +0200
Subject: [PATCH 3/3] fix: remove useLoading hook

---
 frontend/src/component/personalDashboard/FlagMetricsChart.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index 0bb50dfc9dd6..47a5da0d8747 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -24,7 +24,6 @@ import {
 } from './createChartOptions';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
-import useLoading from 'hooks/useLoading';
 
 const defaultYes = [0, 14, 28, 21, 33, 31, 31, 22, 26, 37, 31, 14, 21, 14, 0];
 
@@ -217,9 +216,6 @@ export const FlagMetricsChart: FC<{
 
     const noData = data.datasets[0].data.length === 0;
 
-    console.log('loading', loading);
-    const ref = useLoading(loading);
-
     return (
         <ChartContainer>
             <ExposureAndMetricsRow>