Customizing "Loading..." message when integrating components.

Hi!

When integrating a plasmic component on a php site, there is a short delay during which “Loading…” is displayed. Also, when posting a form using the http api integration, there is a message displaying “Loading”. I would like to customize this, at least to localize the text.

What is the recommended way to achieve this? Is there a dedicated hook?

Thanks

Hello @consistent_slug! I imagine this component is using data from a data source. You can wrap this component in a Loading Boundary component to fully customize the state. You can also add this component to a specific part of your component to only load in that specific part

Thanks Icaro. I had tried this rapidly before posting my question with no success, but probably didn’t try hard enough :slightly_smiling_face: I’ll post a follow up when I’m in front of a computer again

@icaro so here’s a follow up:

Although the components are in a Loading Boundary where I changed the Loading state slot to “Chargement…”, “Loading…” is still displayed on the php site before the form is displayed and when posting the form through the http api integration

Hello @consistent_slug. This Loading comes from the Form component and this is why the Loading Boundary component is not “working”. I will be working on adding an option for removing / changing the text on it now! Thanks for the report.

@icaro, just following up on this, for the Form, the Loading state also occurs on Submit. Is there a way to essentially disable the form while the submission is under way?

Hey @early_lizard. Right now, the loading state shows up when any of the queries you have on the page has the isLoading value equal to true. While you could bind your Submit button to have the disabled prop equal to the isLoading of a query, I think what you want to do is to create a new state isSubmitting and make the onSubmit handler change this state to true before start submitting and to false after it finishes submitting. I think this is a common use case and we should maybe expose a loading state for write operations too.

@consistent_slug. Now, if you open the project settings on the left panel (the gear icon), and click the Antd Config Provider, you’ll see two new options: loadingText to override the loading text from Loading... to anything else, or you can choose to disable this behavior with the removeLoading option