Add UI methods to Puter.js for showing/hiding a full-page loading overlay

[jelveh]

We need methods in Puter.js's puter.ui module to show and hide a full-page loading overlay for indicating background/cloud work or processing. This will provide developers with a simple way to indicate when their apps are performing operations that might take time not having to implement their own loading indicators.

Proposed Methods:

puter.ui.showWorking()  // Shows the overlay
puter.ui.hideWorking()  // Hides the overlay

Where?

The methods should be implemented in Puter.js's UI module

Technical Requirements:

1. Full-page overlay:

   • Semi-transparent background (suggest rgba(0,0,0,0.5))
   • Positioned over all other UI elements (highest z-index)
   • Centered "Working..." text in white
   • Optional: Add a subtle loading/spinner animation

2. Behavior:

   • Minimum display time of 1 second even if hideWorking is called immediately
   • Multiple showWorking calls should not create multiple overlays
   • hideWorking should only hide the overlay after the minimum display time has elapsed
   • The overlay should block all user interaction with elements beneath it

Implementation Details:

let overlayActive = false;
let overlayTimer = null;

puter.ui.showWorking = () => {
    if (overlayActive) return;
    // Create and show overlay
    // Start minimum display timer
}

puter.ui.hideWorking = () => {
    // Only hide after minimum display time has elapsed
}

Design Considerations:

• Either build this using web components or a simple div element, but if using a div, make sure to use unique class names to avoid conflicts with other CSS
• Should we expose a method to check if the overlay is currently active?

[DavidReque]

can i work on this?

[jelveh]

Yes! Just assigned it to you. Let me know if you have questions or need help :)