Fix Interactive Question Loading state (#41880)

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.tsx

@@ -7,11 +7,10 @@ import { SdkError } from "embedding-sdk/components/private/SdkError";
 import type { SdkClickActionPluginsConfig } from "embedding-sdk/lib/plugins";
 import { useSdkSelector } from "embedding-sdk/store";
 import { getPlugins } from "embedding-sdk/store/selectors";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import CS from "metabase/css/core/index.css";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import {
-  initializeQB,
+  initializeQBRaw,
   navigateToNewCardInsideQB,
   updateQuestion,
 } from "metabase/query_builder/actions";
@@ -24,7 +23,7 @@ import {
   getQuestion,
   getUiControls,
 } from "metabase/query_builder/selectors";
-import { Group, Stack } from "metabase/ui";
+import { Group, Stack, Box, Loader } from "metabase/ui";
 import { getEmbeddingMode } from "metabase/visualizations/click-actions/lib/modes";
 import type { CardId } from "metabase-types/api";
 
@@ -56,60 +55,63 @@ export const _InteractiveQuestion = ({
   useEffect(() => {
     const fetchQBData = async () => {
       const { location, params } = getQuestionParameters(questionId);
-      dispatch(initializeQB(location, params));
+      try {
+        await dispatch(initializeQBRaw(location, params));
+      } catch (error) {
+        setLoading(false);
+      }
     };
 
-    fetchQBData().then(() => setLoading(false));
+    fetchQBData();
   }, [dispatch, questionId]);
 
-  if (!loading && !queryResults) {
+  useEffect(() => {
+    if (queryResults) {
+      setLoading(false);
+    }
+  }, [queryResults]);
+
+  if (loading) {
+    return <Loader data-testid="loading-spinner" />;
+  }
+
+  if (!queryResults || !question) {
     return <SdkError message={t`Question not found`} />;
   }
 
   return (
-    <LoadingAndErrorWrapper
-      className={cx(CS.flexFull, CS.fullWidth)}
-      loading={!result}
-      error={typeof result === "string" ? result : null}
-      noWrapper
-    >
-      {() =>
-        !question ? (
-          <SdkError message={t`Question not found`} />
-        ) : (
-          <Stack h="100%">
-            {FilterHeader.shouldRender({
-              question,
-              queryBuilderMode: uiControls.queryBuilderMode,
-              isObjectDetail: false,
-            }) && (
-              <FilterHeader
-                expanded
-                question={question}
-                updateQuestion={(...args) => dispatch(updateQuestion(...args))}
-              />
-            )}
-            <Group h="100%" pos="relative" align="flex-start">
-              <QueryVisualization
-                className={cx(CS.flexFull, CS.fullWidth)}
-                question={question}
-                rawSeries={[{ card, data: result && result.data }]}
-                isRunning={isRunning}
-                isObjectDetail={false}
-                isResultDirty={false}
-                isNativeEditorOpen={false}
-                result={result}
-                noHeader
-                mode={mode}
-                navigateToNewCardInsideQB={(props: any) => {
-                  dispatch(navigateToNewCardInsideQB(props));
-                }}
-              />
-            </Group>
-          </Stack>
-        )
-      }
-    </LoadingAndErrorWrapper>
+    <Box className={cx(CS.flexFull, CS.fullWidth, CS.fullHeight)}>
+      <Stack h="100%">
+        {FilterHeader.shouldRender({
+          question,
+          queryBuilderMode: uiControls.queryBuilderMode,
+          isObjectDetail: false,
+        }) && (
+          <FilterHeader
+            expanded
+            question={question}
+            updateQuestion={(...args) => dispatch(updateQuestion(...args))}
+          />
+        )}
+        <Group h="100%" pos="relative" align="flex-start">
+          <QueryVisualization
+            className={cx(CS.flexFull, CS.fullWidth)}
+            question={question}
+            rawSeries={[{ card, data: result && result.data }]}
+            isRunning={isRunning}
+            isObjectDetail={false}
+            isResultDirty={false}
+            isNativeEditorOpen={false}
+            result={result}
+            noHeader
+            mode={mode}
+            navigateToNewCardInsideQB={(props: any) => {
+              dispatch(navigateToNewCardInsideQB(props));
+            }}
+          />
+        </Group>
+      </Stack>
+    </Box>
   );
 };
 

frontend/src/metabase/query_builder/actions/core/initializeQB.ts

@@ -403,6 +403,15 @@ async function handleQBInit(
   }
 }
 
+// Does the same thing as initializeQB, but doesn't catch errors.
+// This function is used for the SDK, and we want to use the errors
+// to determine loading states and show error messages
+export const initializeQBRaw =
+  (location: LocationDescriptorObject, params: QueryParams) =>
+  async (dispatch: Dispatch, getState: GetState) => {
+    await handleQBInit(dispatch, getState, { location, params });
+  };
+
 export const initializeQB =
   (location: LocationDescriptorObject, params: QueryParams) =>
   async (dispatch: Dispatch, getState: GetState) => {