← Back to Policy Tracker guide

Loading Overlay — Real Save Feedback on ViewItem

Right now, clicking Save just disables the button and changes its text to "Saving...". This adds real full-screen feedback — a blurred overlay with a spinner — for exactly as long as the save genuinely takes, using the variable you already have. Component: cmpLoadingSpinner from powerappsui.com, archived at yaml/components/LoadingOverlay/.

The smallest guide in this batch, on purpose: varSaving already exists, already gets set true right before every save attempt and false once it resolves (success or failure), on both btnSave1 and btnSaveClose1. This component just needs to read that same variable — no new state, no new logic, purely a visual addition on top of behaviour that's already correct.

1. Verify the component pastes cleanly

Insert → Custom → New Component, paste the full contents of yaml/components/LoadingOverlay/LoadingOverlay.yaml, name it cmpLoadingSpinner.

Uses Spinner@1.4.6, which isn't yet confirmed live anywhere in this app (unlike Text@0.0.51/Button@0.0.45, already proven in your delete modals). It's a standard modern Power Apps control, not a custom hack, so low risk — but confirm the import renders correctly, spinner visibly spinning, before wiring it in.
Test: component imports clean, and previewing it directly inside the Component editor shows a spinning circle.

2. Place it on ViewItem, wire it to what already exists

Drag one instance of cmpLoadingSpinner from the Components panel onto the ViewItem screen — last in Tree view so it renders above everything, same placement as the toast and the dialog. (There's no confirmed way to paste a brand-new component instance in as raw YAML in this app yet, since nothing here has used the real Components workflow before today — drag-and-place first, exactly like the Dialog and Stepper guides, then paste these property values onto it once it exists on the canvas.)

Visible: =varSaving
LoadingText: ="Saving..."
OverlayOpacity: =0.3
ShowBlur: =true
Theme: ="Light"
Height: =App.Height
Width: =App.Width
X: =0
Y: =0

Nothing else needs to change — no formula on btnSave1 or btnSaveClose1 is touched, since both already set varSaving correctly. The overlay simply starts reflecting a state that was already being tracked, just invisibly.

Test: edit a field, click Save. You should see the blurred overlay with spinner and "Saving..." for however long the actual save takes — gone the instant it resolves, whether that's under a second or several. Try it once with a deliberately bad connection (airplane mode briefly, if easy to test) to confirm the overlay also clears correctly on the failure path, not just success.