[ML] Data frame analytics: Fix screen flickering in Results Explorer …

…and Analytics Map when no jobs are available (#193890)

## Summary

Fix for [#138193](#138193)
I didn't find any relation between user permissions and the issue.
The error mentioned in the issue doesn't come from the ML package and is
unrelated to the problem.
The view was visible due to the initial state of `jobsExist`. Added
additional loading state to prevent screen flickering.

Disabled automatic display of the job selection flyout when no jobs are
available.

After:


https://github.com/user-attachments/assets/a8c6e5e2-ebcc-4320-b5be-f586ca6c0672

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/page.tsx

@@ -32,8 +32,9 @@ export const Page: FC<{
   analysisType: DataFrameAnalysisConfigType;
 }> = ({ jobId, analysisType }) => {
   const [analyticsId, setAnalyticsId] = useState<AnalyticsSelectorIds | undefined>();
-  const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(!jobId);
+  const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(false);
   const [jobsExist, setJobsExist] = useState(true);
+  const [isLoadingJobsExist, setIsLoadingJobsExist] = useState(false);
   const {
     services: { docLinks },
   } = useMlKibana();
@@ -49,12 +50,17 @@ export const Page: FC<{
   const [, setGlobalState] = useUrlState('_g');
 
   const checkJobsExist = async () => {
+    setIsLoadingJobsExist(true);
     try {
       const { count } = await getDataFrameAnalytics(undefined, undefined, 0);
-      setJobsExist(count > 0);
+      const hasAnalyticsJobs = count > 0;
+      setJobsExist(hasAnalyticsJobs);
+      setIsIdSelectorFlyoutVisible(hasAnalyticsJobs && !jobId);
     } catch (e) {
       // Swallow the error and just show the empty table in the analytics id selector
       console.error('Error checking analytics jobs exist', e); // eslint-disable-line no-console
+    } finally {
+      setIsLoadingJobsExist(false);
     }
   };
 
@@ -98,6 +104,10 @@ export const Page: FC<{
   );
 
   const getEmptyState = () => {
+    if (isLoadingJobsExist) {
+      return null;
+    }
+
     if (jobsExist === false) {
       return <AnalyticsEmptyPrompt />;
     }

x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/page.tsx

@@ -29,10 +29,9 @@ export const Page: FC = () => {
   const modelId = globalState?.ml?.modelId;
 
   const [isLoading, setIsLoading] = useState(false);
-  const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(
-    !jobId && !modelId
-  );
+  const [isIdSelectorFlyoutVisible, setIsIdSelectorFlyoutVisible] = useState<boolean>(false);
   const [jobsExist, setJobsExist] = useState(true);
+  const [isLoadingJobsExist, setIsLoadingJobsExist] = useState(false);
   const { refresh } = useRefreshAnalyticsList({ isLoading: setIsLoading });
 
   const setAnalyticsId = useCallback(
@@ -56,12 +55,17 @@ export const Page: FC = () => {
   const helpLink = docLinks.links.ml.dataFrameAnalytics;
 
   const checkJobsExist = async () => {
+    setIsLoadingJobsExist(true);
     try {
       const { count } = await getDataFrameAnalytics(undefined, undefined, 0);
-      setJobsExist(count > 0);
+      const hasAnalyticsJobs = count > 0;
+      setJobsExist(hasAnalyticsJobs);
+      setIsIdSelectorFlyoutVisible(hasAnalyticsJobs && !jobId && !modelId);
     } catch (e) {
       // Swallow the error and just show the empty table in the analytics id selector
       console.error('Error checking analytics jobs exist', e); // eslint-disable-line no-console
+    } finally {
+      setIsLoadingJobsExist(false);
     }
   };
 
@@ -71,6 +75,10 @@ export const Page: FC = () => {
   }, []);
 
   const getEmptyState = () => {
+    if (isLoadingJobsExist) {
+      return null;
+    }
+
     if (jobsExist === false) {
       return <AnalyticsEmptyPrompt />;
     }