Issue
I am having trouble adding and removing a time-picker widget in Appsmith to display when something is loading. I want to add it to a container and remove it when the loading is complete. I am wondering if it's possible in Appsmith and if there's a recommended way to add a loading/wait widget.
Resolution
The solution involves adding a loading spinner or widget to the page while waiting for data to load. This can be done by creating a container for the spinner and conditionally rendering it based on the loading state of the page or data.
In Appsmith, the loading spinner can be added as a widget and then hidden or shown using the visible property. Here's an example code snippet for adding and removing the spinner:
// Add spinner to container
const spinner = createSpinner();
$w('#container').add(spinner);
// Show spinner
$w('#spinner').visible = true;
// Remove spinner
$w('#container').remove(spinner);
The createSpinner() function is a custom function that returns a spinner widget, and the $w object is used to interact with the Appsmith UI components.
This approach can also be adapted to use other types of loading widgets, such as progress bars or animated illustrations. By controlling the visibility of these widgets, the user can be notified when content is loading without disrupting their experience.