In-Progress App Shading

File: JVE.Shade.pas Inheritance: TComponent ⬅ TJVEShade

This component allows you to easily shade the screen, while your application is contacting the server or performing another lengthy task.

It exposes a single Active property indicating whether the screen is shaded (changing this property shows or hides the shade using a fade animation). The component also exposes the following events:

  • shadeOnShow – this event is called when the shade is actually presented (could be used start heavy work in the main thread when shade is visible.
  • OnCancel – occurs when the user clicks or taps the shade. Usually indicates that the user wants to cancel the operation.

OnCancel event will not hide the shade automatically: it only notifies you of the user’s wishes.


This component also provides two class methods:

  • Show([OnShow<Key>][, OnCancel]) – shades the screen; this function also returns the Key and passes it as a parameter to the OnShow event (if specified), which you should pass to the Hide function. The OnShow and OnCancel callbacks are same as the events.
  • Hide(Key) – removes the shading. The shading is only removed when it was removed for all the keys, with which it was shown.

Such a Key implementation allows you to call the Show function several times and only when all shade requests are removed will the actual shade be hidden.


Notice, the screen will only be shaded as long as the operating system permits it. For example, if the iOS status bar is visible, it will not be shaded; if Mac OS X menu bar or Dock are visible, they will not be shaded, etc. Example shading presentations are: