# Integration

You can integrate the Loader in another component or use it as a building block of a more complex functionality.

The Loader provides approaches for integration in the following components:

* [Button](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/loader/integration#loader-in-a-button)
* [Loading panel](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/loader/integration#loader-in-a-loading-panel)

## Loader in a Button

The following example demonstrates how to integrate the Loader in a button.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/indicators/loader/integration/button/source.txt)

## Loader in a Loading Panel

The following example demonstrates how to integrate the Loader as a building block in a loading panel.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/indicators/loader/integration/loader-panel/source.txt)

## Loader in Deferred Loading

Angular [deferrable views](https://angular.dev/guide/defer) provide a [`@loading`](https://angular.dev/guide/templates/defer#show-loading-content-with-loading) sub-block that renders while the deferred content is being fetched. The Loader component is ideal for this role because it gives the user a clear visual signal that the application is actively loading content.

Combine the Loader with a [Skeleton](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/skeleton) placeholder for the best user experience—the Skeleton appears instantly in the [`@placeholder`](https://angular.dev/guide/templates/defer#show-placeholder-content-with-placeholder) block, and the Loader replaces it during the actual download in the `@loading` block.

The following example demonstrates the Loader inside a `@loading` block. Click **Load Grid** to trigger the deferred content—the Skeleton placeholder is visible initially, the Loader appears during download, and the Grid renders after loading completes. Click **Reset** to return to the placeholder state.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/indicators/loader/integration/deferred-loading/source.txt)

You can use the `minimum` parameter on `@loading` to keep the Loader visible for at least a specified duration. This prevents a brief flash when the deferred content loads quickly.

```html
@loading (minimum 500) {
    <kendo-loader type="infinite-spinner" themeColor="primary" size="large"></kendo-loader>
}
```

## Suggested Links

* [API Reference of the Loader](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/loadercomponent)