refactor: attempt to improve performance #1057

moldy530 · 2024-10-12T04:43:28Z

refactor: make some performance optimizations
refactor(wip): add selectors for theme items

Pull Request Checklist

Did you add new tests and confirm existing tests pass? (yarn test)
Did you update relevant docs? (docs are found in the site folder, and guidelines for updating/adding docs can be found in the contribution guide)
Do your commits follow the Conventional Commits standard?
Does your PR title also follow the Conventional Commits standard?
If you have a breaking change, is it correctly reflected in your commit message? (e.g. feat!: breaking change)
Did you run lint (yarn lint:check) and fix any issues? (yarn lint:write)
Did you follow the contribution guidelines?

PR-Codex overview

This PR focuses on refactoring the UI configuration management within the account-kit library, transitioning from direct config usage to a centralized store approach. It updates various components to utilize the new store, enhancing modularity and maintainability.

Detailed summary

Removed direct config usage in favor of useConfigStore.
Updated components to access UI state via the new store.
Introduced useUiConfig for contextual UI configuration.
Adjusted package dependencies for zustand.
Enhanced theme handling in multiple components.
Refactored modal and authentication handling to utilize the new store structure.

The following files were skipped due to too many changes: examples/ui-demo/src/state/store.tsx, account-kit/react/src/components/auth/sections/EmailAuth.tsx, account-kit/react/src/icons/oauth.tsx, yarn.lock

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

vercel · 2024-10-12T04:43:31Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
aa-sdk-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2024 5:38am
aa-sdk-ui-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2024 5:38am

moldy530 · 2024-10-12T04:44:09Z

account-kit/react/src/components/auth/card/index.tsx

+ <div
+ className="transition-[flex-basis] duration-200 ease-out overflow-y-hidden radius-2"
+ style={{
+ flexBasis: height ? `${height}px` : undefined,


animating flex basis should be more performant than the height

moldy530 · 2024-10-12T04:45:02Z

account-kit/react/src/components/auth/card/footer/help-text.tsx

@@ -2,7 +2,8 @@ import { useUiConfig } from "../../../../hooks/useUiConfig.js";
 import { ls } from "../../../../strings.js";

 export const HelpText = () => {
- const { supportUrl } = useUiConfig();
+ const { supportUrl } = useUiConfig(({ supportUrl }) => ({ supportUrl }));


most of these changes for the useConfig are done so that components subscribe just to the state they care about. This results in WAY fewer renders

moldy530 · 2024-10-12T04:45:55Z

account-kit/react/src/components/auth/sections/EmailAuth.tsx

- setAuthStep({ type: "initial", error });
- },
- });
+export const EmailAuth = memo(


this component is pretty expensive to render, so I'm just memoizing it because in demo app it is always present. This saves on a bunch of renders

moldy530 · 2024-10-12T04:46:17Z

account-kit/react/src/components/auth/sections/OAuth.tsx

@@ -8,7 +9,7 @@ type Props = Extract<AuthType, { type: "social" }>;

 // Not used externally
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const OAuth = ({ ...config }: Props) => {
+export const OAuth = memo(({ ...config }: Props) => {


this component is also super expensive to render and I haven't figure out why. This also saves a number of renders too

moldy530 · 2024-10-12T04:46:47Z

account-kit/react/src/components/button.tsx

@@ -17,31 +16,31 @@ type ButtonProps = (
 "variant" | "ref"
 >;

-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(


forward ref was unnecessary here, so removing it to try and optimize a bit of memory. had no impact really

moldy530 · 2024-10-12T04:47:04Z

account-kit/react/src/components/navigation.tsx

@@ -23,7 +23,7 @@ export const Navigation = ({
 disabled={!showBack}
 className={
 showBack
- ? "text-fg-secondary w-[32px] h-[32px] flex items-center justify-center hover:bg-btn-secondary rounded-md transition-all ease-out duration-200"


from what I could tell, these animations weren't doing anything

moldy530 · 2024-10-12T04:47:50Z

account-kit/react/src/hooks/useUiConfig.tsx

refactored the above uiConfig store to be more like the one in the demo app. This gives us the ability to subscribe to specific pieces of the ui config in the components

moldy530 · 2024-10-12T04:48:21Z

account-kit/react/src/icons/oauth.tsx

some optimizations of the svg components to make them a bit lighterweight

moldy530 · 2024-10-12T04:48:52Z

examples/ui-demo/src/app/providers.tsx

+ const localAlchemyConfig = {
+ ...alchemyConfig,
+ ui: props.initialConfig
+ ? convertDemoConfigToUiConfig(props.initialConfig)
+ : alchemyConfig.ui,
+ };


ensures that the initial config is inline with the cached config if there is one

moldy530 · 2024-10-12T04:49:16Z

examples/ui-demo/src/components/configuration/Authentication.tsx

- Custom
- </p>
+ <div
+ className={cn("flex gap-x-3", auth.showOAuth ? "" : "hidden")}


this makes rendering the authentication config sidebar a bit faster

moldy530 · 2024-10-12T04:50:05Z

examples/ui-demo/src/components/icons/facebook.tsx

more SVG optimizations

moldy530 · 2024-10-12T04:50:11Z

examples/ui-demo/src/components/icons/google.tsx

moldy530 · 2024-10-12T04:51:41Z

examples/ui-demo/src/state/store.tsx

+ return [config.ui.theme];
+}
+
+export function deepEqual(a: any, b: any): boolean {


because the demo app's config store isn't super deep or complex, this ensures that fewer renders take place when nested state is updated. the cost of the deep equal is sub 1ms after doing some testing

moldy530 · 2024-10-12T04:56:17Z

Even after all this though... I'm still seeing dropped frames whenever the height of the card changes. I tested in a different app and I'm not seeing frames dropped, or if they are they're not really perceptible.

These changes result in like 4ish fewer dropped frames. The worst offender is adding or removing the OAuth buttons. Updating that middle section of the card causes the most dropped frames.

Adding or removing the external wallets button used to be as slow as the middle section. It's now noticeably smoother.

moldy530 commented Oct 12, 2024

View reviewed changes

account-kit/react/src/icons/oauth.tsx Outdated

Copy link

Collaborator Author

moldy530 Oct 12, 2024

Choose a reason for hiding this comment

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

some optimizations of the svg components to make them a bit lighterweight

moldy530 commented Oct 12, 2024

View reviewed changes

examples/ui-demo/src/components/icons/facebook.tsx Outdated

Copy link

Collaborator Author

moldy530 Oct 12, 2024

Choose a reason for hiding this comment

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

more SVG optimizations

moldy530 commented Oct 12, 2024

View reviewed changes

examples/ui-demo/src/components/icons/google.tsx Outdated

Copy link

Collaborator Author

moldy530 Oct 12, 2024

Choose a reason for hiding this comment

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

and again

moldy530 commented Oct 12, 2024

View reviewed changes

moldy530 force-pushed the moldy/demo-perf branch from 15d548e to e92424a Compare October 12, 2024 05:00

vercel bot deployed to Preview – aa-sdk-site October 12, 2024 05:10 View deployment

vercel bot had a problem deploying to Preview – aa-sdk-ui-demo October 12, 2024 05:12 Failure

moldy530 force-pushed the moldy/demo-perf branch from e92424a to cfc2a0d Compare October 12, 2024 05:13

refactor: make some performance optimizations

266ecb4

moldy530 force-pushed the moldy/demo-perf branch from cfc2a0d to 266ecb4 Compare October 12, 2024 05:19

vercel bot deployed to Preview – aa-sdk-site October 12, 2024 05:33 View deployment

vercel bot deployed to Preview – aa-sdk-ui-demo October 12, 2024 05:38 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: attempt to improve performance #1057

refactor: attempt to improve performance #1057

moldy530 commented Oct 12, 2024 •

edited by pr-codex bot

Loading

vercel bot commented Oct 12, 2024 •

edited

Loading

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024 •

edited

Loading

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 Oct 12, 2024

moldy530 commented Oct 12, 2024

refactor: attempt to improve performance #1057

Are you sure you want to change the base?

refactor: attempt to improve performance #1057

Conversation

moldy530 commented Oct 12, 2024 • edited by pr-codex bot Loading

Pull Request Checklist

PR-Codex overview

Detailed summary

vercel bot commented Oct 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moldy530 Oct 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moldy530 commented Oct 12, 2024

moldy530 commented Oct 12, 2024 •

edited by pr-codex bot

Loading

vercel bot commented Oct 12, 2024 •

edited

Loading

moldy530 Oct 12, 2024 •

edited

Loading