fix: show empty chart when we're loading flag metrics (#8419)

This PR makes it so that we show an empty chart when we're loading flag
metrics, instead of showing the placeholder chart.

It uses a very simple version that may not be the same size as the
standard chart (because it has no labels), but we can change that at a
later date.


![image](https://github.com/user-attachments/assets/621ba1b9-e936-4c65-a77b-e1cd6debf865)

frontend/src/component/personalDashboard/ConnectSDK.tsx

@@ -103,7 +103,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
@@ -116,7 +115,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>

frontend/src/component/personalDashboard/FlagMetricsChart.tsx

@@ -69,6 +69,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 +121,7 @@ const useFlagMetrics = (
     environment: string | null,
     hoursBack: number,
 ) => {
-    const { featureMetrics: metrics = [] } = useFeatureMetricsRaw(
+    const { featureMetrics: metrics = [], loading } = useFeatureMetricsRaw(
         flagName,
         hoursBack,
     );
@@ -126,7 +151,7 @@ const useFlagMetrics = (
         return createBarChartOptions(theme, hoursBack, locationSettings);
     }, [theme, hoursBack, locationSettings]);
 
-    return { data, options };
+    return { data, options, loading };
 };
 
 const EnvironmentSelect: FC<{
@@ -183,7 +208,11 @@ 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;
 
@@ -210,7 +239,9 @@ export const FlagMetricsChart: FC<{
                 </MetricsSelectors>
             </ExposureAndMetricsRow>
 
-            {noData ? (
+            {loading ? (
+                <EmptyFlagMetricsChart />
+            ) : noData ? (
                 <PlaceholderFlagMetricsChart />
             ) : (
                 <ChartWrapper>