feat(Combobox): add loading component (#30)

* feat(Combobox): show loading component on search

* refactor(Combobox): remove unused codes

packages/apsara-ui/src/Combobox/Combobox.stories.tsx

@@ -1,14 +1,17 @@
-import React from "react";
-import Combobox from "./Combobox";
+import React, { useState } from "react";
 import { SelectProps } from "rc-select";
 
+import Combobox from "./Combobox";
+
 export default {
     title: "General/Combobox",
     component: Combobox,
     argTypes: { mode: { control: "select", options: ["multiple", "tags", "combobox", undefined] } },
 };
 
-const options = [
+
+type SelectOptionType = SelectProps['options'];
+const options: SelectOptionType = [
     { value: "2", label: "pilotdata-integration:bq_smoke_test_json_insert_all_dataset - Bigquery Dataset" },
     { value: "3", label: "Ford Raptor" },
     { value: "4", label: "Ferrari Testarossa" },
@@ -25,7 +28,6 @@ const options = [
 const Template = (args: SelectProps) => <Combobox {...args} />;
 
 export const MultiSelectWithSearch = Template.bind({});
-
 MultiSelectWithSearch.args = {
     placeholder: "Please Select",
     options: options,
@@ -35,3 +37,25 @@ MultiSelectWithSearch.args = {
     mode: "multiple",
     optionFilterProp: "label",
 };
+
+export const WithAsyncOptions = () => {
+    const [isSearching, setIsSearching] = useState<boolean>(false);
+    const [opts, setOpts] = useState<SelectOptionType>();
+
+    const search = (q: string) => {
+        setIsSearching(true);
+        setOpts(undefined);
+        setTimeout(() => {
+            setOpts(options.filter((o) => (o.label as string).includes(q)))
+            setIsSearching(false);
+        }, 1000);
+    }
+
+    return <Combobox
+        options={opts}
+        allowClear
+        optionFilterProp="label"
+        onSearch={search}
+        loading={isSearching}
+    />
+};

packages/apsara-ui/src/Combobox/Combobox.tsx

@@ -13,6 +13,13 @@ const notFoundContent = (
     </NotFoundContent>
 );
 
+const loadingContent = (
+    <NotFoundContent>
+        <Icon name="discovery" color="#36CEC2" size={30} />
+        <div style={{ fontSize: 15 }}>Loading</div>
+    </NotFoundContent>
+);
+
 const Combobox = ({
     options,
     mode,
@@ -65,7 +72,7 @@ const Combobox = ({
 
     return (
         <StyledMultiSelect
-            notFoundContent={notFoundContent}
+            notFoundContent={props.loading ? loadingContent : notFoundContent}
             {...props}
             showInputIcon={showInputIcon || !allowClear}
             showSearch={showSearch}