react-fonticonpicker icon indicating copy to clipboard operation
react-fonticonpicker copied to clipboard

Built In Support for Promise based source

Open swashata opened this issue 7 years ago • 1 comments

The source of icons and search can be a promise which resolves to a valid JSON. We can accept that to have support for async source.

  1. Display a loading status on placeholder and dropdown while waiting for the promise to resolve.
  2. Once done, set the icons and search.
  3. Children components should be able to pick it up.

This also means some changes in the structure:

  1. Instead of relying on icons and search as props, we need to set state within FontIconPicker component.
  2. If it is not a promise, then simply init. Set internal state sourceStatus to "done".
  3. If it is a promise, then set state sourceInit to "waiting" and resolve the promise. When resolved, set sourceInit to "done". On error set sourceStatus to "error".
  4. Child component will pick it up from the state and will show appropriate message and UI.

API blob

const icons = fetch('https://gist.githubusercontent.com/swashata/c0db916b33700c91ab75f59d4aeba7d3/raw/366789b2d001a99f5f41f1ceab980d991de059c3/fontawesome-icons-with-categories.json')
    .then(data => data.json());

return <FontIconPicker icons={icons} />;

swashata avatar Apr 09 '18 14:04 swashata

Maybe with react suspense, it would be more feasible.

swashata avatar Oct 10 '18 15:10 swashata