chore(wren-ui): add loading indicators for recommended question selec…

…tion (#974)
Canner · Dec 4, 2024 · 651b944 · 651b944
1 parent daef828
commit 651b944
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 11 deletions.
diff --git a/wren-ui/src/components/pages/home/prompt/RecommendedQuestionsPrompt.tsx b/wren-ui/src/components/pages/home/prompt/RecommendedQuestionsPrompt.tsx
@@ -1,9 +1,11 @@
 import { useState, useMemo } from 'react';
+import clsx from 'clsx';
 import styled from 'styled-components';
 import { Space, Button, Row, Col } from 'antd';
 import ColumnHeightOutlined from '@ant-design/icons/ColumnHeightOutlined';
 import MinusOutlined from '@ant-design/icons/MinusOutlined';
 import EllipsisWrapper from '@/components/EllipsisWrapper';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import { Logo } from '@/components/Logo';
 import { makeIterable } from '@/utils/iteration';
 import { GroupedQuestion } from '@/hooks/useRecommendedQuestionsInstruction';
@@ -21,24 +23,55 @@ const QuestionBlock = styled.div`
   height: 150px;
   transition: border-color ease 0.2s;
 
-  &:hover {
+  &:hover:not(.is-disabled) {
     border-color: var(--geekblue-6) !important;
   }
+
+  &.is-active {
+    border-color: var(--geekblue-6) !important;
+  }
+
+  &.is-disabled {
+    opacity: 0.8;
+  }
 `;
 
 const MAX_EXPANDED_QUESTIONS = 9;
 
 interface Props {
   onSelect: (payload: { sql: string; question: string }) => void;
   recommendedQuestions: GroupedQuestion[];
+  loading: boolean;
 }
 
-const QuestionTemplate = ({ category, sql, question, onSelect }) => {
+const QuestionTemplate = ({
+  category,
+  sql,
+  question,
+  onSelect,
+  loading,
+  selectedQuestion,
+}) => {
+  const isSelected = selectedQuestion === question;
+  const isDisabled = loading && !isSelected;
+
+  const onClick = () => {
+    if (loading) return;
+    onSelect({ sql, question });
+  };
+
   return (
     <Col span={8}>
       <QuestionBlock
-        className="border border-gray-5 rounded px-3 pt-3 pb-4 cursor-pointer"
-        onClick={() => onSelect({ sql, question })}
+        className={clsx(
+          'border border-gray-5 rounded px-3 pt-3 pb-4',
+          loading ? 'cursor-wait' : 'cursor-pointer',
+          {
+            'is-active': isSelected,
+            'is-disabled cursor-not-allowed': isDisabled,
+          },
+        )}
+        onClick={onClick}
       >
         <div className="d-flex justify-space-between align-center text-sm mb-3">
           <div
@@ -47,6 +80,7 @@ const QuestionTemplate = ({ category, sql, question, onSelect }) => {
           >
             {category}
           </div>
+          {isSelected && loading && <LoadingOutlined className="ml-1 gray-7" />}
         </div>
         <EllipsisWrapper multipleLine={4} text={question} />
       </QuestionBlock>
@@ -57,9 +91,10 @@ const QuestionTemplate = ({ category, sql, question, onSelect }) => {
 const QuestionColumnIterator = makeIterable(QuestionTemplate);
 
 export default function RecommendedQuestionsPrompt(props: Props) {
-  const { onSelect, recommendedQuestions } = props;
+  const { onSelect, recommendedQuestions, loading } = props;
 
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const [selectedQuestion, setSelectedQuestion] = useState<string>('');
 
   const questionList = useMemo(() => {
     return recommendedQuestions.slice(
@@ -72,6 +107,11 @@ export default function RecommendedQuestionsPrompt(props: Props) {
 
   const showExpandButton = recommendedQuestions.length > MAX_EXPANDED_QUESTIONS;
 
+  const onSelectQuestion = (payload: { sql: string; question: string }) => {
+    onSelect(payload);
+    setSelectedQuestion(payload.question);
+  };
+
   return (
     <div className="bg-gray-2 px-10 py-6">
       <div className="d-flex align-center mb-3">
@@ -91,7 +131,12 @@ export default function RecommendedQuestionsPrompt(props: Props) {
       >
         <CategorySectionBlock>
           <Row gutter={[16, 16]} className="mt-3">
-            <QuestionColumnIterator data={questionList} onSelect={onSelect} />
+            <QuestionColumnIterator
+              data={questionList}
+              onSelect={onSelectQuestion}
+              loading={loading}
+              selectedQuestion={selectedQuestion}
+            />
           </Row>
           {showExpandButton && (
             <div className="text-right">

diff --git a/wren-ui/src/pages/home/index.tsx b/wren-ui/src/pages/home/index.tsx
@@ -47,7 +47,7 @@ const SampleQuestionsInstruction = (props) => {
 };
 
 function RecommendedQuestionsInstruction(props) {
-  const { onSelect } = props;
+  const { onSelect, loading } = props;
 
   const {
     buttonProps,
@@ -65,6 +65,7 @@ function RecommendedQuestionsInstruction(props) {
       <RecommendedQuestionsPrompt
         recommendedQuestions={recommendedQuestions}
         onSelect={onSelect}
+        loading={loading}
       />
       <div className="py-12" />
     </div>
@@ -96,12 +97,14 @@ export default function Home() {
   const { data: suggestedQuestionsData } = useSuggestedQuestionsQuery({
     fetchPolicy: 'cache-and-network',
   });
-  const [createThread] = useCreateThreadMutation({
+  const [createThread, { loading: threadCreating }] = useCreateThreadMutation({
     onCompleted: () => homeSidebar.refetch(),
   });
 
-  const [generateThreadRecommendationQuestions] =
-    useGenerateThreadRecommendationQuestionsMutation();
+  const [
+    generateThreadRecommendationQuestions,
+    { loading: threadRecommendationQuestionsGenerating },
+  ] = useGenerateThreadRecommendationQuestionsMutation();
 
   const { data: settingsResult } = useGetSettingsQuery();
   const settings = settingsResult?.settings;
@@ -144,7 +147,10 @@ export default function Home() {
       )}
 
       {!isSampleDataset && (
-        <RecommendedQuestionsInstruction onSelect={onSelect} />
+        <RecommendedQuestionsInstruction
+          onSelect={onSelect}
+          loading={threadCreating || threadRecommendationQuestionsGenerating}
+        />
       )}
       <Prompt ref={$prompt} {...askPrompt} onSelect={onSelect} />
     </SiderLayout>

diff --git a/wren-ui/src/styles/utilities/display.less b/wren-ui/src/styles/utilities/display.less
@@ -21,6 +21,14 @@
   cursor: pointer !important;
 }
 
+.cursor-wait {
+  cursor: wait !important;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed !important;
+}
+
 .select-none {
   user-select: none !important;
 }