ui: Fix loading state for inactive projects

Author: yomete

ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx

@@ -43,6 +43,8 @@ interface MetricsGraphSectionProps {
     refreshedTimeRange?: {from: number; to: number; timeSelection: string},
     expression?: string
   ) => void;
+  profileTypesLoading?: boolean;
+  hasNoProfileTypes?: boolean;
 }
 
 export function MetricsGraphSection({
@@ -62,6 +64,8 @@ export function MetricsGraphSection({
   query,
   setNewQueryExpression,
   commitDraft,
+  profileTypesLoading = false,
+  hasNoProfileTypes = false,
 }: MetricsGraphSectionProps): JSX.Element {
   const resetStateOnSeriesChange = useResetStateOnSeriesChange();
   const batchUpdates = useURLStateBatch();
@@ -177,13 +181,15 @@ export function MetricsGraphSection({
                   onPointClick={handlePointClick}
                 />
               </>
-            ) : (
-              profileSelection === null && (
-                <div className="p-2">
+            ) : profileSelection === null && !profileTypesLoading ? (
+              <div className="p-2">
+                {hasNoProfileTypes ? (
+                  <ProfileMetricsEmptyState message="No profiling data found in the selected time range. Try selecting a longer time range." />
+                ) : (
                   <ProfileMetricsEmptyState message="Please select a profile type and click 'Search' to begin." />
-                </div>
-              )
-            )}
+                )}
+              </div>
+            ) : null}
           </div>
         </>
       )}

ui/packages/shared/profile/src/ProfileSelector/index.tsx

@@ -363,6 +363,11 @@ const ProfileSelector = ({
         setQueryExpression={setQueryExpression}
         setNewQueryExpression={setDraftExpression}
         commitDraft={commitDraft}
+        profileTypesLoading={profileTypesLoading}
+        hasNoProfileTypes={
+          !profileTypesLoading &&
+          (profileTypesData?.types == null || profileTypesData.types.length === 0)
+        }
       />
     </>
   );

ui/packages/shared/profile/src/hooks/useLabels.ts

@@ -47,6 +47,7 @@ export const useLabelNames = (
   match?: string[]
 ): UseLabelNames => {
   const metadata = useGrpcMetadata();
+  const enabled = profileType !== undefined && profileType !== '';
 
   const {data, isLoading, error, refetch} = useGrpcQuery<LabelsResponse>({
     key: ['labelNames', profileType, match?.join(','), start, end],
@@ -63,14 +64,14 @@ export const useLabelNames = (
       return response;
     },
     options: {
-      enabled: profileType !== undefined && profileType !== '',
+      enabled,
       keepPreviousData: false,
     },
   });
 
   return {
     result: {response: data, error: error as Error},
-    loading: isLoading,
+    loading: enabled && isLoading,
     refetch: async () => {
       await refetch();
     },