Skip to content

chore: Citations loading optimization #38837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jsartisan merged 1 commit into from
Jan 24, 2025
Merged

chore: Citations loading optimization #38837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/Button/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
37 changes: 28 additions & 9 deletions app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

/**
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ...client/packages/design-system/widgets/src/components/Datepicker/src/DatepickerTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/Datepicker/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
7 changes: 5 additions & 2 deletions ...t/packages/design-system/widgets/src/components/Datepicker/stories/Datepicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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} />
))}
Expand Down
11 changes: 7 additions & 4 deletions app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import clsx from "clsx";
import type { Component, Ref } from "react";
import React, { Suspense, forwardRef, lazy, useMemo } from "react";

Expand All @@ -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];
Expand All @@ -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;
}>,
};
}

Expand All @@ -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}
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove redundant Boolean calls.

The Boolean calls are unnecessary as the values will be automatically coerced to boolean.

-          data-size={Boolean(size) ? size : undefined}
+          data-size={size || undefined}
-        data-size={Boolean(size) ? size : undefined}
+        data-size={size || undefined}

Also applies to: 45-45

🧰 Tools
🪛 Biome (1.9.4)

[error] 36-36: Avoid redundant Boolean call

It is not necessary to use Boolean call when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant Boolean call

(lint/complexity/noExtraBooleanCast)

{...rest}
/>
}
>
<Icon
className={styles.icon}
className={clsx(styles.icon, className)}
data-color={color ? color : undefined}
data-icon=""
data-size={Boolean(size) ? size : undefined}
Expand Down
6 changes: 5 additions & 1 deletion ...t/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
SIZES,
BUTTON_VARIANTS,
COLORS,
type IconButtonProps,
} from "@appsmith/wds";
import { objectKeys } from "@appsmith/utils";

Expand Down Expand Up @@ -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} />
))}
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/InlineButtons/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 5 additions & 2 deletions ...ages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
))}
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/Input/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/Modal/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/Select/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ export interface SelectProps
*
* @default medium
*/
size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
size?: Exclude<keyof typeof SIZES, "xSmall" | "large">;
}
14 changes: 12 additions & 2 deletions app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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) => (
Expand Down
10 changes: 7 additions & 3 deletions app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 0 additions & 2 deletions app/client/packages/design-system/widgets/src/components/Spinner/src/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.spinner {
animation: spin 1s linear infinite;
height: 1.5em;
width: 1.5em;
}

@keyframes spin {
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">;
}
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/TextField/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">;
}
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/TimeField/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">;
}
2 changes: 1 addition & 1 deletion app/client/packages/design-system/widgets/src/components/ToolbarButtons/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
8 changes: 6 additions & 2 deletions ...es/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
Expand Down
Loading