[Feature Request]: Implement Loading State to Switch about baklava HOT 7 OPEN

With loading icon

from baklava.

Maybe you can add a feature called "async" and make it automatic as you said.

But my opinion is to leave the process to the developer by adding a preventable event called before-toggle and adding the "loading" property rather than automatic.

from baklava.

The button component doesn't have internal state changes like the switch. And currently, we are not able to "cancel" a button click. We can just disable the button which is also possible in the switch but this doesn't cover our requirements here. So, in theory, we may add a cancellable before-click event for the button as well, which automatically switches itself to the loading state if this event is canceled.

But, when I consider the implementation part, I couldn't find a way to make that "automatic" approach work for reverting back to the normal state. So I think we can consider that "automatic" way in the future with a different approach like being able to set an async function as the toggle checker middleware, which the switch component can call and wait to make the toggle.

<bl-switch id="lightSwitcher"></bl-switch>

<script>
lightSwitcher.addToggleChecker(async ({ state }) => {
  return await lightService.toggle(state);
});
</script>

So in the example above, the switch component can run toggle checker functions if provided, wait for them in loading state then revert back to the normal state with the approval of that checker function. Like a "custom validator" as we discussed for the input component. That would be a very practical and also UX-wise well-quality solution.

But, as I mentioned earlier, we need a publicly accessible loading state anyway and having before-toggle event can be also helpful for some other advanced use cases. So let's just leave the setting loading state to the developer as you suggested and leave the "automatic approach" to another discussion. 👍🏻

from baklava.

We also have a loading state for the button component. So, we can add it to the switch component, too. Good idea. 🚀

We need to make sure it is aligned with the button component, we should use our loading icon (16x16px) here. And also the speed of the rotation of the loader can be aligned with the button. 🙏🏻

Loading color will be consistent when the switch component is given primary or other colors, right?

@muratcorlu what do you think?

from baklava.

I think this would be a nice addition, indeed.

@Enes5519 What is your idea about how to implement this? I think we will need to have a new cancellable before-toggle event to interrupt toggle and change the state to in progress. Maybe even this can be automatic, like: "when toggle requested, set state to it in progress, fire before-toggle, if it's not prevented return back to normal state and finish the toggle" But I believe there will be some other use cases that we'll want to show the switch in progress state (like, fetching the initial state of the switch by a remote call that can take some time)

from baklava.

If we add a loading state to switch and a cancellable event named before-toggle, if the developer wants to prevent toggling but not show a loader (which will look weird from the user perspective, like nothing happens) then the developer can just set switch.loading = false inside the event handler. Is this not flexible enough? 😊

As we discussed in preventing dialog closing, the better approach would be to give visual feedback to the user that will mean "I got your request but something is blocking or waiting for this action". Otherwise, it'll look like a bug.

I think we need to focus on "good defaults" while giving options.

@buseselvi What do you think?

from baklava.

I think there should be an approach like the buttons here. When you prevent the click event of the button, the loading is not active, it should not be here either.

from baklava.