[8.x] [ML] Data frame analytics: Fix screen flickering in Results Exp…

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

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Data frame analytics: Fix screen flickering in Results Explorer
and Analytics Map when no jobs are available
(#193890)](#193890)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Robert
Jaszczurek","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-01T08:32:37Z","message":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are available (#193890)\n\n##
Summary\r\n\r\nFix for
[#138193](https://github.com/elastic/kibana/issues/138193)\r\nI didn't
find any relation between user permissions and the issue.\r\nThe error
mentioned in the issue doesn't come from the ML package and
is\r\nunrelated to the problem.\r\nThe view was visible due to the
initial state of `jobsExist`. Added\r\nadditional loading state to
prevent screen flickering.\r\n\r\nDisabled automatic display of the job
selection flyout when no jobs
are\r\navailable.\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a8c6e5e2-ebcc-4320-b5be-f586ca6c0672","sha":"a2e995a9e735a50f54a314197ab1c2812a8416fb","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix",":ml","Feature:Data
Frame
Analytics","v9.0.0","Team:ML","v8.16.0","backport:version","v8.15.3"],"title":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are
available","number":193890,"url":"https://github.com/elastic/kibana/pull/193890","mergeCommit":{"message":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are available (#193890)\n\n##
Summary\r\n\r\nFix for
[#138193](https://github.com/elastic/kibana/issues/138193)\r\nI didn't
find any relation between user permissions and the issue.\r\nThe error
mentioned in the issue doesn't come from the ML package and
is\r\nunrelated to the problem.\r\nThe view was visible due to the
initial state of `jobsExist`. Added\r\nadditional loading state to
prevent screen flickering.\r\n\r\nDisabled automatic display of the job
selection flyout when no jobs
are\r\navailable.\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a8c6e5e2-ebcc-4320-b5be-f586ca6c0672","sha":"a2e995a9e735a50f54a314197ab1c2812a8416fb"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","8.15"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193890","number":193890,"mergeCommit":{"message":"[ML]
Data frame analytics: Fix screen flickering in Results Explorer and
Analytics Map when no jobs are available (#193890)\n\n##
Summary\r\n\r\nFix for
[#138193](https://github.com/elastic/kibana/issues/138193)\r\nI didn't
find any relation between user permissions and the issue.\r\nThe error
mentioned in the issue doesn't come from the ML package and
is\r\nunrelated to the problem.\r\nThe view was visible due to the
initial state of `jobsExist`. Added\r\nadditional loading state to
prevent screen flickering.\r\n\r\nDisabled automatic display of the job
selection flyout when no jobs
are\r\navailable.\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a8c6e5e2-ebcc-4320-b5be-f586ca6c0672","sha":"a2e995a9e735a50f54a314197ab1c2812a8416fb"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.15","label":"v8.15.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Robert Jaszczurek <[email protected]>

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 />;
     }