From e8c4e5fd22d2e4e8d47ae7f5a0aec03e4f4905a3 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Fri, 31 Mar 2023 12:54:09 +0200
Subject: [PATCH] :bug: Fix first rendering ghost issue

---
 .../app_plugin/get_application_user_messages.test.tsx     | 6 +++---
 .../public/app_plugin/get_application_user_messages.tsx   | 2 +-
 .../editor_frame_service/editor_frame/state_helpers.ts    | 8 ++++++--
 x-pack/plugins/lens/public/embeddable/embeddable.tsx      | 5 ++++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx b/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx
index c49ef7f349f18..fa0ed4e21a668 100644
--- a/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx
@@ -149,7 +149,7 @@ describe('application-level user messages', () => {
           activeDatasource: {
             checkIntegrity: jest.fn(() => ['missing_pattern']),
           } as unknown as Datasource,
-          activeDatasourceState: { state: {} },
+          activeDatasourceState: { isLoading: false, state: {} },
           core: createCoreStartWithPermissions(),
           ...irrelevantProps,
         })
@@ -166,7 +166,7 @@ describe('application-level user messages', () => {
                 activeDatasource: {
                   checkIntegrity: jest.fn(() => ['missing_pattern']),
                 } as unknown as Datasource,
-                activeDatasourceState: { state: {} },
+                activeDatasourceState: { isLoading: false, state: {} },
                 // user can go to management, but indexPatterns management is not accessible
                 core: createCoreStartWithPermissions({
                   navLinks: { management: true },
@@ -188,7 +188,7 @@ describe('application-level user messages', () => {
                 activeDatasource: {
                   checkIntegrity: jest.fn(() => ['missing_pattern']),
                 } as unknown as Datasource,
-                activeDatasourceState: { state: {} },
+                activeDatasourceState: { isLoading: false, state: {} },
                 // user can't go to management at all
                 core: createCoreStartWithPermissions({
                   navLinks: { management: false },
diff --git a/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.tsx b/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.tsx
index b56736eabe7ac..da3caeca2d60a 100644
--- a/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.tsx
@@ -36,7 +36,7 @@ export const getApplicationUserMessages = ({
   visualization: VisualizationState | undefined;
   visualizationMap: VisualizationMap;
   activeDatasource: Datasource | null | undefined;
-  activeDatasourceState: { state: unknown } | null;
+  activeDatasourceState: { isLoading: boolean; state: unknown } | null;
   dataViews: DataViewsState;
   core: CoreStart;
 }): UserMessage[] => {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
index cea4597be577a..9a31b98328b53 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
@@ -404,10 +404,14 @@ export async function persistedStateToExpression(
 
 export function getMissingIndexPattern(
   currentDatasource: Datasource | null | undefined,
-  currentDatasourceState: { state: unknown } | null,
+  currentDatasourceState: { isLoading: boolean; state: unknown } | null,
   indexPatterns: IndexPatternMap
 ) {
-  if (currentDatasourceState?.state == null || currentDatasource == null) {
+  if (
+    currentDatasourceState?.isLoading ||
+    currentDatasourceState?.state == null ||
+    currentDatasource == null
+  ) {
     return [];
   }
   const missingIds = currentDatasource.checkIntegrity(currentDatasourceState.state, indexPatterns);
diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx
index 21aae0b8a4d44..3a70c583d0253 100644
--- a/x-pack/plugins/lens/public/embeddable/embeddable.tsx
+++ b/x-pack/plugins/lens/public/embeddable/embeddable.tsx
@@ -569,7 +569,10 @@ export class Embeddable
         },
         visualizationMap: this.deps.visualizationMap,
         activeDatasource: this.activeDatasource,
-        activeDatasourceState: { state: this.activeDatasourceState },
+        activeDatasourceState: {
+          isLoading: Boolean(this.activeDatasourceState),
+          state: this.activeDatasourceState,
+        },
         dataViews: {
           indexPatterns: this.indexPatterns,
           indexPatternRefs: this.indexPatternRefs, // TODO - are these actually used?