---
product: "AG Grid"
title: "Overlays & Loading"
description: "Display loading, empty and other grid states using overlays or loading rows."
framework: javascript
version: "36.2.0"
related:
    - title: "Provided Overlays"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/"
    - title: "Active Overlay"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-active/"
    - title: "Loading Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/loading-rows/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Overlays & Loading

Use overlays to display messages over the grid, or loading rows to show placeholders while row data is loading.

## Loading

Set `loading=true` to display the loading overlay. With the Client-Side Row Model, also set `loadingRows=true` to display skeleton rows instead. See [Loading Rows](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/loading-rows/) for configuration and custom loading cells.

The Server-Side Row Model manages its loading rows as it requests data from the datasource. See [Server-Side Row Model Loading Rows](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/server-side-model-loading-rows/) for its full-width and skeleton loading options.

## Overlays

The grid automatically displays one of the provided overlays based on the current state of the grid. Custom overlays can be shown on demand by the application.

The following example shows the grid provided loading overlay when `loading=true`.

#### Loading overlay

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

interface IAthlete {
  athlete: string;
  country: string;
}

let gridApi: GridApi<IAthlete>;

const gridOptions: GridOptions<IAthlete> = {
  loading: true,
  columnDefs: [{ field: "athlete" }, { field: "country" }],
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Loading overlay](https://www.ag-grid.com/archive/36.2.0/examples/overlays-overview/loading-overlay/typescript/)

## Grid Provided Overlays

The grid provides the following overlays that will be shown automatically based on grid state (unless disabled):

- [Loading](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/#loading) - shown when data is loading
- [No Rows](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/#no-rows) - shown when there are no rows to display
- [No Matching Rows](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/#no-matching-rows) - shown when no rows match the current filter
- [Exporting](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/#exporting) - shown when data is exporting to CSV / Excel
- [File Input](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/#file-input) - shown when `processFileInput` is provided and no row data is present

For details about the provided overlays and how to customise them see: [Provided Overlays](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/).

## Active Overlay

Applications can provide a custom overlay and control when it is displayed. This enables full control over the content and timing of when the overlay is displayed.

For details about custom overlays see: [Active Overlay](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-active/).