Update text for visualisation loading state (#39625)

frontend/src/metabase/visualizations/components/Visualization/LoadingView/LoadingView.tsx

@@ -23,13 +23,11 @@ function SlowQueryView({ expectedDuration, isSlow }: LoadingViewProps) {
         <div>
           {jt`This usually takes an average of ${(
             <Duration>{duration(expectedDuration)}</Duration>
-          )}.`}
-          <br />
-          {t`(This is a bit long for a dashboard)`}
+          )}, but is currently taking longer.`}
         </div>
       ) : (
         <div>
-          {t`This is usually pretty fast but seems to be taking a while right now.`}
+          {t`This usually loads immediately, but is currently taking longer.`}
         </div>
       )}
     </SlowQueryMessageContainer>

frontend/src/metabase/visualizations/components/Visualization/LoadingView/LoadingView.unit.spec.tsx

+import { screen, renderWithProviders } from "__support__/ui";
+
+import LoadingView from "./LoadingView";
+
+type SetupOpts = {
+  expectedDuration: number;
+  isSlow: "usually-slow" | boolean;
+};
+
+function setup(opts: SetupOpts) {
+  renderWithProviders(<LoadingView {...opts} />);
+}
+
+describe("LoadingView", () => {
+  it("should only render the spinner when the query is usually fast", () => {
+    setup({
+      expectedDuration: 10,
+      isSlow: false,
+    });
+
+    expect(screen.queryByText("Still Waiting…")).not.toBeInTheDocument();
+  });
+
+  it("should show 'Still waiting' when the query is usually slow", () => {
+    setup({
+      expectedDuration: 10_000,
+      isSlow: "usually-slow",
+    });
+
+    expect(screen.getByText("Still Waiting…")).toBeInTheDocument();
+    expect(
+      screen.getByText(/This usually takes an average of/),
+    ).toBeInTheDocument();
+    expect(screen.getByText("10 seconds")).toBeInTheDocument();
+    expect(
+      screen.getByText(/but is currently taking longer./),
+    ).toBeInTheDocument();
+  });
+});