Loading

[vpanyushenko]

Hooks to force an ID to show or hide it's loading animation

https://bubbles-pied.vercel.app/show-loading https://bubbles-pied.vercel.app/hide-loading

[vpanyushenko]

Do we not need these hooks on react native?

[clearly-outsane]

We can just render the component programmatically through state like: {visible && <Loading/>} or I can have a prop on the component for you to set like <Loading show={true} />

[vpanyushenko]

Whatever the best developer experience here is. I'll include @HasaanSultan and @aizazamjad since they are more day to day. I'll give one example of how I do this on the web in svelte. I understand that the experience in React Native is different:

When pressing a button:

const buttonPressed = (event) => {
  const element_id = event.target.id
  showLoading(element_id)

  //Whenever some async task finishes

  hideLoading(element_id)
}

The showLoading and hideLoading hooks deal with the state of the element while the function that I'm working on deals with just the thing the function is trying to do. And I don't need to add the let visible = false for each element that can load since the hook handles that based on the loading element's ID, which gets auto generated if no one has assigned an ID to it yet.

The hooks also let me build the loading functionality into other functions. For example, I build a function that submits forms for me and deals with errors states and stuff. So I just have a one liner

await submitForm(form_inputs, "/v1/deliveries", { loading: element_id });

Now the button that loads and get's disabled when it's loading can have the hideLoading function get triggered when the submitForm function completes or errors out.

[clearly-outsane]

const Form = () => {
const [loading,setLoading] = useState(false)

const onButtonPress= async () => {
  setLoading(true)
  //Run your async task with await
  setLoading(false)
}

return (
  <>
       //..rest of the component 
     <Loading visible = {loading} />
  </>
)
}

Just to clarify - is what you're talking about similar to the code above? I've never used svelte before so just trying to understand if element_id is simply a way to reference a DOM element. If yes then yeah we can just do something like this.

On the other hand if you're talking about some way to globally trigger the loading state of all components being rendered then instead of a useState hook I'd just move that to a global state which all the library components can access and will automatically show a loading state if that's set. Since the state is global, any function can handle that functionality like you mentioned, since well it can be set from anywhere