chore: Citations loading optimization (#38837)

/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
	- Enhanced spinner component with dynamic size configuration
	- Improved type safety across multiple design system components

- **Bug Fixes**
	- Refined size prop handling for various UI components
	- Updated type definitions to prevent invalid size selections

- **Refactor**
	- Replaced `Omit` with `Exclude` for more precise type management
	- Updated component prop type definitions
	- Standardized size prop handling across design system widgets

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12947772391>
> Commit: 4043446
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12947772391&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 24 Jan 2025 10:51:14 UTC
<!-- end of auto-generated comment: Cypress test results  -->

app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx

@@ -57,7 +57,7 @@ const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
 
         {isLoading && (
           <span aria-hidden={!isLoading ? true : undefined} data-loader="">
-            <Spinner />
+            <Spinner size={size} />
             <span {...visuallyHiddenProps}>{loadingText}</span>
           </span>
         )}

app/client/packages/design-system/widgets/src/components/Button/src/types.ts

@@ -40,7 +40,7 @@ export interface ButtonProps extends HeadlessButtonProps {
   /** Size of the button
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Exclude<keyof typeof SIZES, "large">;
   /** Indicates if the button should be disabled when the form is invalid */
   disableOnInvalidForm?: boolean;
   /** Indicates if the button should reset the form when clicked */

app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button, Flex, BUTTON_VARIANTS, COLORS, SIZES } from "@appsmith/wds";
+import {
+  Button,
+  Flex,
+  BUTTON_VARIANTS,
+  COLORS,
+  SIZES,
+  type ButtonProps,
+} from "@appsmith/wds";
 import { objectKeys } from "@appsmith/utils";
 
 /**
@@ -59,33 +66,45 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-6">
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button icon="star" key={size} size={size} />
           ))}
       </Flex>
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button icon="star" key={size} size={size}>
               {size}
             </Button>
           ))}
       </Flex>
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button icon="star" iconPosition="end" key={size} size={size}>
               {size}
             </Button>
           ))}
       </Flex>
       <Flex alignItems="start" gap="spacing-4">
-        {Object.keys(SIZES)
-          .filter((size) => !["large"].includes(size))
+        {objectKeys(SIZES)
+          .filter(
+            (size): size is NonNullable<ButtonProps["size"]> =>
+              !["large"].includes(size),
+          )
           .map((size) => (
             <Button key={size} size={size}>
               {size}

app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts

@@ -8,7 +8,7 @@ export interface ComboBoxProps
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
 
   /** The content to display as the placeholder. */
   placeholder?: string;

app/client/packages/design-system/widgets/src/components/Datepicker/src/DatepickerTrigger.tsx

@@ -9,7 +9,7 @@ import dateInputStyles from "./styles.module.css";
 
 interface DatepickerTriggerProps {
   isLoading?: boolean;
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
   isDisabled?: boolean;
 }
 

app/client/packages/design-system/widgets/src/components/Datepicker/src/types.ts

@@ -11,7 +11,7 @@ export interface DatePickerProps<T extends DateValue>
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
   /**
    * className for the popover
    */

app/client/packages/design-system/widgets/src/components/Datepicker/stories/Datepicker.stories.tsx

@@ -4,7 +4,7 @@ import { Button, Flex, SIZES } from "@appsmith/wds";
 import { parseDate } from "@internationalized/date";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { DatePicker } from "../src";
+import { DatePicker, type DatePickerProps, type DateValue } from "../src";
 /**
  * A date picker allows a user to select a date.
  */
@@ -44,7 +44,10 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="sizing-60">
       {objectKeys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+        .filter(
+          (size): size is NonNullable<DatePickerProps<DateValue>["size"]> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <DatePicker key={size} popoverClassName="sb-unstyled" size={size} />
         ))}

app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import type { Component, Ref } from "react";
 import React, { Suspense, forwardRef, lazy, useMemo } from "react";
 
@@ -7,7 +8,7 @@ import type { IconProps } from "./types";
 import { FallbackIcon } from "./FallbackIcon";
 
 const _Icon = (props: IconProps, ref: Ref<Component>) => {
-  const { color, name, size = "medium", ...rest } = props;
+  const { className, color, name, size = "medium", ...rest } = props;
 
   const Icon = useMemo(() => {
     const pascalName = ICONS[name];
@@ -16,7 +17,9 @@ const _Icon = (props: IconProps, ref: Ref<Component>) => {
       import("@tabler/icons-react").then((module) => {
         if (pascalName in module) {
           return {
-            default: module[pascalName] as React.ComponentType,
+            default: module[pascalName] as React.ComponentType<{
+              className?: string;
+            }>,
           };
         }
 
@@ -29,14 +32,14 @@ const _Icon = (props: IconProps, ref: Ref<Component>) => {
     <Suspense
       fallback={
         <FallbackIcon
-          className={styles.icon}
+          className={clsx(styles.icon, className)}
           data-size={Boolean(size) ? size : undefined}
           {...rest}
         />
       }
     >
       <Icon
-        className={styles.icon}
+        className={clsx(styles.icon, className)}
         data-color={color ? color : undefined}
         data-icon=""
         data-size={Boolean(size) ? size : undefined}

app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx

@@ -6,6 +6,7 @@ import {
   SIZES,
   BUTTON_VARIANTS,
   COLORS,
+  type IconButtonProps,
 } from "@appsmith/wds";
 import { objectKeys } from "@appsmith/utils";
 
@@ -66,7 +67,10 @@ export const Sizes: Story = {
   render: () => (
     <Flex alignItems="start" gap="spacing-2">
       {objectKeys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+        .filter(
+          (size): size is NonNullable<IconButtonProps["size"]> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <IconButton icon="star" key={size} size={size} />
         ))}

app/client/packages/design-system/widgets/src/components/InlineButtons/src/types.ts

@@ -34,7 +34,7 @@ export interface InlineButtonsProps<T>
   /** Size of buttons
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Exclude<keyof typeof SIZES, "large">;
 }
 
 export interface InlineButtonsItem

app/client/packages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx

@@ -66,8 +66,11 @@ export const IndividualSemantic: Story = {
 export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="100%">
-      {Object.keys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+      {objectKeys(SIZES)
+        .filter(
+          (size): size is Exclude<keyof typeof SIZES, "xSmall" | "large"> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <InlineButtons items={itemList} key={size} size={size} />
         ))}

app/client/packages/design-system/widgets/src/components/Input/src/types.ts

@@ -10,7 +10,7 @@ interface CommonInputProps {
   suffix?: React.ReactNode;
   isLoading?: boolean;
   isReadOnly?: boolean;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }
 
 export interface InputProps

app/client/packages/design-system/widgets/src/components/Modal/src/types.ts

@@ -19,7 +19,7 @@ export interface ModalProps
   /** size of the modal
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
   /** The children of the component. */
   children: ReactNode;
   /** Additional props to be passed to the overlay */

app/client/packages/design-system/widgets/src/components/Select/src/types.ts

@@ -8,5 +8,5 @@ export interface SelectProps
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
 }

app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Select, Button, Flex, SIZES, ListBoxItem } from "@appsmith/wds";
+import {
+  Select,
+  Button,
+  Flex,
+  SIZES,
+  ListBoxItem,
+  type SelectProps,
+} from "@appsmith/wds";
 
 import { selectItems, selectItemsWithIcons } from "./selectData";
 
@@ -40,7 +47,10 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="sizing-60">
       {Object.keys(SIZES)
-        .filter((size) => !["xSmall", "large"].includes(size))
+        .filter(
+          (size): size is NonNullable<SelectProps["size"]> =>
+            !["xSmall", "large"].includes(size),
+        )
         .map((size) => (
           <Select key={size} label={size} placeholder={size} size={size}>
             {selectItems.map((item) => (

app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 
-import { Icon } from "../../Icon";
+import { Icon, type IconProps } from "../../Icon";
 import styles from "./styles.module.css";
 
-const Spinner = () => {
-  return <Icon className={styles.spinner} name="loader" size="xSmall" />;
+interface SpinnerProps {
+  size?: Exclude<IconProps["size"], "large">;
+}
+
+const Spinner = ({ size = "medium" }: SpinnerProps) => {
+  return <Icon className={styles.spinner} name="loader" size={size} />;
 };
 
 Spinner.displayName = "Spinner";

app/client/packages/design-system/widgets/src/components/Spinner/src/styles.module.css

@@ -1,7 +1,5 @@
 .spinner {
   animation: spin 1s linear infinite;
-  height: 1.5em;
-  width: 1.5em;
 }
 
 @keyframes spin {

app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts

@@ -10,5 +10,5 @@ export interface TextAreaProps extends AriaTextFieldProps, FieldProps {
   rows?: number;
   fieldClassName?: string;
   inputClassName?: string;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }

app/client/packages/design-system/widgets/src/components/TextField/src/types.ts

@@ -6,5 +6,5 @@ export interface TextFieldProps extends AriaTextFieldProps, FieldProps {
   placeholder?: string;
   suffix?: ReactNode;
   prefix?: ReactNode;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }

app/client/packages/design-system/widgets/src/components/TimeField/src/types.ts

@@ -10,5 +10,5 @@ export interface TimeFieldProps<T extends TimeValue>
     FieldProps {
   suffix?: ReactNode;
   prefix?: ReactNode;
-  size?: Omit<keyof typeof SIZES, "xSmall">;
+  size?: Exclude<keyof typeof SIZES, "xSmall">;
 }

app/client/packages/design-system/widgets/src/components/ToolbarButtons/src/types.ts

@@ -33,7 +33,7 @@ export interface ToolbarButtonsProps<T>
   /** Size of buttons
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Exclude<keyof typeof SIZES, "large">;
   /** Alignment of buttons inside the container
    * @default start
    */

app/client/packages/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx

@@ -70,10 +70,14 @@ export const Semantic: Story = {
 export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="100%">
-      {Object.keys(SIZES)
+      {objectKeys(SIZES)
         .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
-          <ToolbarButtons items={itemList} key={size} size={size} />
+          <ToolbarButtons
+            items={itemList}
+            key={size}
+            size={size as Exclude<keyof typeof SIZES, "large">}
+          />
         ))}
     </Flex>
   ),