vsl 183: lazy loading icons and organize reusable components #102
Conversation
linxiao-li
changed the title
| @@ -1,8 +1,7 @@ | |||
| import React, { useState } from "react"; | |||
| import { isEmpty } from "lodash"; | |||
| import InputAddress from "./InputAddress"; | |||
| import InputText from "./InputText"; | |||
There was a problem hiding this comment.
Why did we delete this?
There was a problem hiding this comment.
InputAddress is moved to library/InputAddress,
InputText is only used on this page and it performs exactly like a normal text input, no reason to create a separate file for it. On the other hand, if we want to normalize the input behaviors in the future, we can create inputText reusable component and apply it across the board
There was a problem hiding this comment.
It would be useful to create a new component or modify the one that is deleted so it can also accept things like:
- label
- flag - if the field is required (to show the *)
- placeholder
- onChange
That way we will unify the look and have less code written.
There was a problem hiding this comment.
100% agree. Would you mind creating a ticket for this?
There was a problem hiding this comment.
…to linxiaoli/vsl-183
| @@ -183,11 +190,16 @@ function SafeContacts({ address }) { | |||
| <div className="column p-0 mt-5 is-flex is-align-items-center is-justify-content-space-between is-full"> | |||
| <h4 className="is-size-5">Saved Addresses</h4> | |||
| {!isEmpty(contacts) && ( | |||
| <<<<<<< HEAD | |||
There was a problem hiding this comment.
Updated! Thanks a lot!
| @@ -53,7 +53,7 @@ const AddCollection = ({ onCancel, onNext }) => { | |||
| /> | |||
| {addressValid && ( | |||
| <div style={{ position: "absolute", right: 17, top: 14 }}> | |||
| <Check /> | |||
| <Svg nam="Check" /> | |||
|
There are some compiling errors:
|
| try { | ||
| const svgComponent = await import(`./${name}`); | ||
| setSvgComponent(svgComponent.default(props)); | ||
| } catch (e) { | ||
| console.log(e); | ||
| } |
There was a problem hiding this comment.
| try { | |
| const svgComponent = await import(`./${name}`); | |
| setSvgComponent(svgComponent.default(props)); | |
| } catch (e) { | |
| console.log(e); | |
| } | |
| await import(`./${name}`) | |
| .then(({ default: Svg }) => setSvgComponent(<Svg {...props} />)) | |
| .catch(console.error) |
There was a problem hiding this comment.
I don't think we should use mixed syntax, it causes confusion and makes the code harder to maintain, this answer from stack overflow explains it well: https://stackoverflow.com/a/54387912.
| })(); | ||
| //eslint-disable-next-line | ||
| }, [name]); | ||
| if (!svgComponent) return null; |
There was a problem hiding this comment.
svgComponent should already be null if component fails to load so this line shouldn't be necessary
Co-authored-by: Manny404 <manny@art404.com>
|
@mannynotfound Thanks a lot! Does the design of CAST look similar to VESSEL? If so we should promote @cast/shared-components to @dapperCollectives/shared-components, it would save VESSEL a ton of development work reinventing the wheels! @amyliu6 |
Description
2.Moved Dropdown, ProgressBar and InputAddress into
library/componentsand updated the references** note: I've also created a set of tickets for implementing storybook as part of the effort in building and maintaining our front-end library https://linear.app/dappercollectives/issue/VSL-195
Demo / Test Result
Before lazy loading:
Webpack load the entire svg file into the bundle:
After lazy loading:
Webpack load the loading helper Svg/index.js into the bundle
When we need a svg, we make network requests for the specific file