feat(ai): Add loading indicator (#46501)

static/app/views/issueDetails/openAIFixSuggestion/aiLoaderMessage.tsx

@@ -0,0 +1,46 @@
+import {useEffect, useState} from 'react';
+import shuffle from 'lodash/shuffle';
+
+import {t} from 'sentry/locale';
+
+const LOADING_MESSAGES = [
+  t('Heating up them GPUs'),
+  t('Engineering a prompt'),
+  t('Demonstrating value'),
+  t('Moving the needle'),
+  t('Preventing prompt injection attacks'),
+  t('Remove traces of depression from answers'),
+  t('Reticulating splines or whatever'),
+  t('Loading marketing material'),
+  t('Wiping node_modules'),
+  t('Installing dependencies'),
+  t('Searching StackOverflow'),
+  t('Googling for solutions'),
+  t('Runing spell checker'),
+  t('Searching for the perfect emoji'),
+  t('Adding trace amounts of human touch'),
+  t("Don't be like Sydney, don't be like Sydney"),
+  t('Initiating quantum leap'),
+  t('Charging flux capacitors'),
+  t('Summoning a demon'),
+];
+
+export function AiLoaderMessage() {
+  const [messages] = useState(() => shuffle(LOADING_MESSAGES));
+  const [messageIndex, setMessageIndex] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (messageIndex < messages.length - 1) {
+        setMessageIndex(messageIndex + 1);
+      }
+    }, Math.random() * 700 + 800);
+    return () => clearInterval(id);
+  });
+
+  return (
+    <div>
+      <strong>{messages[messageIndex]}…</strong>
+    </div>
+  );
+}

static/app/views/issueDetails/openAIFixSuggestion/openAIFixSuggestionPanel.tsx

@@ -6,7 +6,6 @@ import {Button} from 'sentry/components/button';
 import FeatureBadge from 'sentry/components/featureBadge';
 import {feedbackClient} from 'sentry/components/featureFeedback/feedbackModal';
 import LoadingError from 'sentry/components/loadingError';
-import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {Panel, PanelBody, PanelFooter, PanelHeader} from 'sentry/components/panels';
 import {IconHappy, IconMeh, IconSad} from 'sentry/icons';
 import {IconChevron} from 'sentry/icons/iconChevron';
@@ -17,6 +16,7 @@ import marked from 'sentry/utils/marked';
 import {useQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
+import {AiLoaderMessage} from 'sentry/views/issueDetails/openAIFixSuggestion/aiLoaderMessage';
 import {useCustomerPolicies} from 'sentry/views/issueDetails/openAIFixSuggestion/useCustomerPolicies';
 import {useOpenAISuggestionLocalStorage} from 'sentry/views/issueDetails/openAIFixSuggestion/useOpenAISuggestionLocalStorage';
 import {experimentalFeatureTooltipDesc} from 'sentry/views/issueDetails/openAIFixSuggestion/utils';
@@ -115,7 +115,10 @@ export function OpenAIFixSuggestionPanel({eventID, projectSlug}: Props) {
         <Fragment>
           <PanelBody withPadding>
             {dataIsLoading ? (
-              <LoadingIndicator />
+              <AiLoaderWrapper>
+                <div className="ai-loader" />
+                <AiLoaderMessage />
+              </AiLoaderWrapper>
             ) : dataIsError ? (
               <LoadingErrorWithoutMarginBottom onRetry={dataRefetch} />
             ) : (
@@ -178,7 +181,7 @@ export function OpenAIFixSuggestionPanel({eventID, projectSlug}: Props) {
 
 const FixSuggestionPanel = styled(Panel)`
   margin-top: ${space(1.5)};
-  margin-bottom: 0;
+  margin-bottom: ${space(1.5)};
   overflow: hidden;
 `;
 
@@ -207,3 +210,8 @@ const LoadingErrorWithoutMarginBottom = styled(LoadingError)`
 const FeatureBadgeNotUppercase = styled(FeatureBadge)`
   text-transform: capitalize;
 `;
+
+const AiLoaderWrapper = styled('div')`
+  text-align: center;
+  padding-bottom: ${space(4)};
+`;

static/less/group-detail.less

@@ -193,6 +193,13 @@
   }
 }
 
+.ai-loader {
+  height: 300px;
+  background: center / contain no-repeat url(../images/spot/ai-loader.gif);
+  margin-top: -20px;
+  margin-bottom: -45px;
+}
+
 /**
 * Traceback
 * ============================================================================