# [Usage](../../../usage.md) > Loader Overlay
This framework UI has already integrated the loader overlay: its purpose is to hide the page until everything is loaded or assets are downloaded.  
You can locate the loader-overlay component in:
```
resources/views/components/ui/loader_overlay.blade.php
```
---
## Usage
You must include this in your general layout or in a view:
```html
<x-kfw::loader-overlay />
```
Example:
```html
<html>
    <head>
        <x-kfw::assets />
    </head>
    <body>
        <x-kfw::loader-overlay />
        @yield('content')
        
    </body>
</html>
```

If using the:
```html
<x-kfw::ui>
    <!-- content here -->
</x-kfw::ui>
```
the loading overlay is already included.

### Example: manual control for long actions

The overlay shows automatically on page load and hides when assets are ready (see [UI basics](../../styling/basics.md) on the assets cache). For a long form submit or table export, you can re-show it from JS:

```javascript
kfwShowLoader();   // show overlay
fetch('/export', { method: 'POST' })
    .finally(() => kfwHideLoader()); // hide when done
```

> If the function names differ in your published assets version, inspect `loader_overlay.blade.php` — the show/hide helpers live next to the component markup.

---

See also: [Usage](../../../usage.md), [UI basics](../../styling/basics.md), [Registering custom CSS and JS](registering_assets.md), [Animations](animations.md).