Unform: Add async function support in initialData prop

[ceopaludetto]

What would you like to be added:

When I use other libraries like Formik, I have some trouble about async data, double loading (page loading using dynamic imports and data loading) is not a good approach for UX. Why not use a Promise resolve to get initialData?

Why is this needed:

I think about a simple function inside initialData prop like this:

async function fetchProfileInformation(){
    const res =  await fetch("/somelink");
    return res.data;
}

<Form initialData={fetchProfileInformation} >
    {...}
</Form>

Additional context

In typescript, a simple enhancement in prop verification is:

initialData: {} | () => Promise<{}>

Thank's for the attention.

[italoiz]

@SorEduard It would not be a use case with state, as the example below:

export function Component() {
  const [initialData, setInitialData] = useState({});

  async function getInitialData() {
    const res = await api.get("/somelink");
    setInitialData(res.data);
  }

  return (
    <Form initialData={initialData}>
      {/** ... */}
    </Form>
  )
}

[ceopaludetto]

@italoiz Yes this approach work's, but cause flash in UI, why not solve data before render the form? I do not know if this is really necessary because there are innumerable methods to get data before route resolve, but in some libraries like apollo-graphql, this give a lot of difficulty to make, using prefetch before history.push, in SSR to. Thanks for reply.

[diego3g]

@SorEduard I understand your thoughts but i don't think it's unform responsability wait for data to load, as the user may use many different types of loading like shimmer placeholders (like this) or a loading indicator.

Maybe you should wrap the form with a conditional to render it only when you finish loading the data.

What do you think?

[italoiz]

I think @diego3g is saying you could do something like this:

export function Component() {
  const [initialData, setInitialData] = useState(null);

  async function getInitialData() {
    const res = await api.get("/somelink");
    setInitialData(res.data);
  }

  // display loading here...
  // example: {!initialData && <Loading />}

  return (
    {initialData && (
      <Form initialData={initialData}>
        {/** ... */}
      </Form>
    )}
  )
}

[ceopaludetto]

@diego3g makes sense, was just a suggestion, the different approaches suggested would solve the issue well, thank you, closing.