Skip to content
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.

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

Replace current Sidebar with Ant Design Sidebar #530

Merged
merged 8 commits into from
Apr 10, 2020

Conversation

EDsCODE
Copy link
Member

@EDsCODE EDsCODE commented Apr 9, 2020

Starting to use ant design for components

  • adds antd package
  • replaces the sidebar with an antd based sidebar

@EDsCODE
Copy link
Member Author

EDsCODE commented Apr 9, 2020

Could use some initial QA on deployment just to see what it looks like

@timgl timgl temporarily deployed to posthog-ant-design-side-qmf11z April 9, 2020 16:14 Inactive
@timgl timgl temporarily deployed to posthog-ant-design-side-qmf11z April 9, 2020 16:31 Inactive
@timgl timgl temporarily deployed to posthog-ant-design-side-1ypxc3 April 9, 2020 16:32 Inactive
@timgl timgl temporarily deployed to posthog-ant-design-side-1ypxc3 April 9, 2020 16:37 Inactive
@timgl timgl temporarily deployed to posthog-ant-design-side-1ypxc3 April 9, 2020 17:32 Inactive
@timgl timgl temporarily deployed to posthog-ant-design-side-1ypxc3 April 9, 2020 18:02 Inactive
@EDsCODE EDsCODE mentioned this pull request Apr 9, 2020
17 tasks
@timgl timgl temporarily deployed to posthog-ant-design-side-1ypxc3 April 10, 2020 00:08 Inactive
url + '/signup/' + this.props.user.team.signup_token
}
value={url + '/signup/' + this.props.user.team.signup_token}
readOnly={true}
Copy link
Member Author

Choose a reason for hiding this comment

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

fixes a lingering input error related to this component

@timgl
Copy link
Collaborator

timgl commented Apr 10, 2020

This looks great and now works. However, I'm a little worried about the massive increase in bundle size.

With antd:
image

On master:
image

200kb more for the JS bundle is a little worrying, and I think we can implement tree shaking to solve that.

The additional 600kb of CSS is super noticable, when you refresh now the page shows some unstyled buttons (so the React has rendered) before the css is even finished loading. I think we should move the css import to styles.scss and do the same thing we did with bootstrap: load css only for the components we actually need, one at a time. It's a little bit more effort but will really speed up initial load and subsequent performance (b/c browser has to parse less css).

EDIT: happy for the action out of this comment to be: add another checkbox to the main issue and merge this in the mean time

@EDsCODE
Copy link
Member Author

EDsCODE commented Apr 10, 2020

good call. I'll add the todo and look at a few ways to do reduce the css. ant-design offers a few modularizing alternatives that'll be allow for even less overhead

@EDsCODE EDsCODE merged commit ecbec73 into master Apr 10, 2020
@EDsCODE EDsCODE deleted the ant-design-sidebar-dropin branch April 10, 2020 18:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants