ui: fix long loading message

Previously, the long loading message shown on the
sql activity fingerprints pages were resetting
the delay on every re-render, since we were
constructing the duration object directly at the
the component usage, which makes the component
reset its delay every time.

This commit changes the delay component to use
a static duration object.

Epic: none

Release note: None

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -78,6 +78,7 @@ import {
   StatementDiagnosticsReport,
 } from "../api";
 import { filteredStatementsData } from "../sqlActivity/util";
+import { STATS_LONG_LOADING_DURATION } from "../util/constants";
 
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
@@ -569,7 +570,7 @@ export class StatementsPage extends React.Component<
     const { filters, activeFilters } = this.state;
 
     const longLoadingMessage = (
-      <Delayed delay={moment.duration(2, "s")}>
+      <Delayed delay={STATS_LONG_LOADING_DURATION}>
         <InlineAlert
           intent="info"
           title="If the selected time interval contains a large amount of data, this page might take a few minutes to load."

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx

@@ -73,6 +73,7 @@ import { InlineAlert } from "@cockroachlabs/ui-components";
 import { TransactionViewType } from "./transactionsPageTypes";
 import { isSelectedColumn } from "../columnsSelector/utils";
 import moment from "moment";
+import { STATS_LONG_LOADING_DURATION } from "../util/constants";
 
 type IStatementsResponse = protos.cockroach.server.serverpb.IStatementsResponse;
 
@@ -405,7 +406,7 @@ export class TransactionsPage extends React.Component<
     );
 
     const longLoadingMessage = (
-      <Delayed delay={moment.duration(2, "s")}>
+      <Delayed delay={STATS_LONG_LOADING_DURATION}>
         <InlineAlert
           intent="info"
           title="If the selected time interval contains a large amount of data, this page might take a few minutes to load."

pkg/ui/workspaces/cluster-ui/src/util/constants.ts

@@ -8,6 +8,8 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
+import { duration } from "moment";
+
 export const aggregatedTsAttr = "aggregated_ts";
 export const appAttr = "app";
 export const appNamesAttr = "appNames";
@@ -45,3 +47,5 @@ export const serverToClientErrorMessageMap = new Map([
 ]);
 
 export const NO_SAMPLES_FOUND = "no samples";
+
+export const STATS_LONG_LOADING_DURATION = duration(2, "s");