fix(sdk): show loader right after visualizing in notebook editor for the first time (#50411)

* show sdk loading state when visualizing for the first time

* rename to isQueryResultLoading

* check for loading indicator

* add notes on slow 3G

e2e/test-component/scenarios/embedding-sdk/create-question.cy.spec.tsx

@@ -17,9 +17,17 @@ describeEE("scenarios > embedding-sdk > create-question", () => {
     mockAuthProviderAndJwtSignIn();
   });
 
-  it("can create questions via the CreateQuestion component", () => {
+  it("can create a question via the CreateQuestion component", () => {
     cy.intercept("POST", "/api/card").as("createCard");
 
+    cy.intercept("POST", "/api/dataset", req => {
+      // throttling to 500 Kbps (slow 3G) makes the loading indicator
+      // shows up reliably when we click on visualize.
+      req.on("response", res => {
+        res.setThrottle(500);
+      });
+    });
+
     mountSdkContent(
       <Flex p="xl">
         <CreateQuestion />
@@ -40,12 +48,18 @@ describeEE("scenarios > embedding-sdk > create-question", () => {
 
       cy.findByRole("button", { name: "Visualize" }).click();
 
+      // Should show a loading indicator (metabase#47564)
+      cy.findByTestId("loading-indicator").should("exist");
+
       // Should be able to go back to the editor view
       cy.findByRole("button", { name: "Show editor" }).click();
 
       // Should be able to visualize the question again
       cy.findByRole("button", { name: "Visualize" }).click();
 
+      // Should not show a loading indicator again as the question has not changed (metabase#47564)
+      cy.findByTestId("loading-indicator").should("not.exist");
+
       // Should be able to save to a new question right away
       cy.findByRole("button", { name: "Save" }).click();
     });

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Editor.tsx

@@ -53,8 +53,8 @@ export const Editor = ({ onApply = () => {} }: EditorProps) => {
             await updateQuestion(nextQuestion, { run: false })
           }
           runQuestionQuery={async () => {
-            await runQuestion();
             onApply();
+            await runQuestion();
           }}
           setQueryBuilderMode={() => {}}
           hasVisualizeButton={true}

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx

@@ -30,15 +30,18 @@ export const QuestionVisualization = ({
     updateQuestion,
   } = useInteractiveQuestionContext();
 
-  if (isQuestionLoading) {
+  // When visualizing a question for the first time, there is no query result yet.
+  const isQueryResultLoading = question && !queryResults;
+
+  if (isQuestionLoading || isQueryResultLoading) {
     return <SdkLoader />;
   }
 
-  if (!question || !queryResults) {
+  if (!question) {
     return <SdkError message={t`Question not found`} />;
   }
 
-  const [result] = queryResults;
+  const [result] = queryResults ?? [];
   const card = question.card();
 
   return (

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx

@@ -78,11 +78,14 @@ export const InteractiveQuestionResult = ({
   const [isSaveModalOpen, { open: openSaveModal, close: closeSaveModal }] =
     useDisclosure(false);
 
-  if (isQuestionLoading) {
+  // When visualizing a question for the first time, there is no query result yet.
+  const isQueryResultLoading = question && !queryResults;
+
+  if (isQuestionLoading || isQueryResultLoading) {
     return <SdkLoader />;
   }
 
-  if (!question || !queryResults) {
+  if (!question) {
     return <SdkError message={t`Question not found`} />;
   }