Add custom spinner example

csandman · Dec 4, 2024 · c5f73d5 · c5f73d5
1 parent c2a04fb
commit c5f73d5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/demo/src/app.tsx b/demo/src/app.tsx
@@ -10,7 +10,15 @@ import {
   Stack,
   Text,
 } from "@chakra-ui/react";
-import { AsyncSelect, CreatableSelect, Select } from "chakra-react-select";
+import {
+  AsyncSelect,
+  CreatableSelect,
+  GroupBase,
+  LoadingIndicatorProps,
+  Select,
+  chakraComponents,
+} from "chakra-react-select";
+import { useColorModeValue } from "./components/ui/color-mode";
 import { Field } from "./components/ui/field";
 import {
   SelectContent,
@@ -22,7 +30,7 @@ import {
   SelectValueText,
 } from "./components/ui/select";
 import animeMovies from "./data/anime-movies";
-import { colorOptions, groupedOptions } from "./data/options";
+import { ColorOption, colorOptions, groupedOptions } from "./data/options";
 
 const mappedColorOptions = colorOptions.map((option) => ({
   ...option,
@@ -36,6 +44,35 @@ const tagVariantOptions = [
   { value: "subtle", label: "Subtle", variant: "subtle" },
 ];
 
+const asyncComponents = {
+  LoadingIndicator: (
+    props: LoadingIndicatorProps<ColorOption, true, GroupBase<ColorOption>>
+  ) => {
+    const { color, trackColor } = useColorModeValue(
+      {
+        color: "colorPalette.500",
+        trackColor: "colors.colorPalette.100",
+      },
+      {
+        color: "colorPalette.300",
+        trackColor: "colors.colorPalette.800",
+      }
+    );
+
+    return (
+      <chakraComponents.LoadingIndicator
+        colorPalette="blue"
+        color={color}
+        trackColor={trackColor}
+        animationDuration="750ms"
+        spinnerSize="md"
+        borderWidth="3px"
+        {...props}
+      />
+    );
+  },
+};
+
 const App = () => {
   return (
     <Container as="main" maxWidth="lg" mt={8} mb={16}>
@@ -134,6 +171,17 @@ const App = () => {
           />
         </Field>
 
+        <Field label="Async Select with Custom Spinner">
+          <AsyncSelect
+            placeholder="Select some colors..."
+            loadOptions={(_inputValue, callback) => {
+              setTimeout(() => callback(colorOptions), 10000);
+            }}
+            components={asyncComponents}
+            isLoading
+          />
+        </Field>
+
         <Field label="Select with Creatable Options">
           <CreatableSelect
             isMulti

diff --git a/src/index.ts b/src/index.ts
@@ -213,7 +213,10 @@ declare module "react-select" {
      * The color of the filled in area of the spinner.
      *
      * Defaults to your Chakra theme's text color.
-     *
+     * @example
+     * ```jsx
+     * <Spinner color="blue.600"/>
+     * ```
      * @see {@link https://www.chakra-ui.com/docs/components/spinner#custom-color}
      */
     color?: string;
@@ -223,6 +226,10 @@ declare module "react-select" {
      *
      * This prop populates the CSS variable `--spinner-track-color`
      *
+     * @example
+     * ```jsx
+     * <Spinner trackColor="colors.blue.100"/>
+     * ```
      * @see {@link https://www.chakra-ui.com/docs/components/spinner#track-color}
      */
     trackColor?: string;