# Configuring the Loading Screen

Canonical page: https://www.adaptabletools.com/docs/ui-loading-screen

- The Loading Screen is displayed while AdapTable is being initialised
- This screen is fully configurable to match different requirements

The Loading Screen appears while AdapTable is being initialised and everything is being correctly set up.

- AdapTable shows the loading screen at the start of `Adaptable.init`, and hides it when initialisation finishes
- In other words, it is only removed after state is loaded and AG Grid is ready

The Loading Screen is configured in `loadingScreenOptions` on [User Interface Options](https://www.adaptabletools.com/docs/technical-reference-ui/index.md).

### `showLoadingScreen`

Display the Loading Screen while AdapTable initialises

Set to `false` if you never want the dialog.

```ts {4}
userInterfaceOptions: {
  loadingScreenOptions: {
    showLoadingScreen: false,
  },
},
```

### `loadingScreenDelay`

Milliseconds to wait before the dialog appears

This is a wait-before-show, not a minimum display time. If initialisation finishes first, the dialog may never appear.

```ts {4}
userInterfaceOptions: {
  loadingScreenOptions: {
    loadingScreenDelay: 2000,
  },
},
```

### `loadingScreenTitle`

Title text in the Loading Screen

```ts {4}
userInterfaceOptions: {
  loadingScreenOptions: {
    loadingScreenTitle: 'Loading your grid',
  },
},
```

### `loadingScreenText`

Body text in the Loading Screen

```ts {4}
userInterfaceOptions: {
  loadingScreenOptions: {
    loadingScreenText: 'Fetching saved layouts and preferences…',
  },
},
```

**Example: Configuring Loading Screen**

Custom loading screen title, text, and delay during initialisation

- `loadingScreenTitle` and `loadingScreenText` are set to custom strings
- `loadingScreenDelay` is `200` (dialog appears 200ms after init starts)
- Note: we have configured `stateOptions.loadState` to wait 2.5 seconds so initialisation takes long enough for the loading screen to remain visible

- Refresh the demo (or open it in a new tab) to run `Adaptable.init` again and see the loading dialog
- Change `loadingScreenDelay` to `2000` and refresh — the dialog appears later; if init finishes first, you may see nothing (delay is "wait before show", not "minimum display time")

Demo project (Vanilla); the files without a marker are shown below:

```text
src/
  adaptableOptions.ts
  agGridModules.ts     [template]
  columnDefs.ts
  gridOptions.ts
  index.ts             [template]
  onAdaptableReady.ts  [template]
  rowData.ts           [template]
  styles.css           [template]
index.html             [template]
package.json           [template]
tsconfig.json          [template]
```

Files marked `[template]` are the same in every demo; see the [demo template](https://www.adaptabletools.com/llms/demo-template.md#vanilla).

**`src/adaptableOptions.ts`**

```ts
import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

/** Simulates a slow state load so the loading screen stays visible during init. */
const STATE_LOAD_DELAY_MS = 2500;

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  userName: 'Demo User',
  adaptableId: 'Loading Screen Demo',
  userInterfaceOptions: {
    loadingScreenOptions: {
      showLoadingScreen: true,
      loadingScreenDelay: 200,
      loadingScreenTitle: 'Loading your grid',
      loadingScreenText:
        'Fetching saved layouts and preferences — this demo deliberately waits 2.5 seconds to ensure the loading screen is visible.',
    },
  },
  stateOptions: {
    loadState: () =>
      new Promise(resolve => {
        setTimeout(() => resolve({}), STATE_LOAD_DELAY_MS);
      }),
    persistState: () => Promise.resolve(true),
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'updated_at',
            'has_wiki',
            'created_at',
            'pushed_at',
            'github_watchers',
          ],
        },
      ],
    },
  },
};
```

**`src/gridOptions.ts`**

```ts
import {GridOptions, themeBalham} from 'ag-grid-enterprise';
import {rowData} from './rowData';
import {columnDefs} from './columnDefs';

export const gridOptions: GridOptions = {
  theme: themeBalham,
  defaultColDef: {
    sortable: true,
    filter: true,
    floatingFilter: true,
    enableRowGroup: true,
    wrapHeaderText: true,
    autoHeaderHeight: true,
  },
  columnDefs: columnDefs,
  rowData: rowData,
  sideBar: true,
};
```

**`src/columnDefs.ts`**

```ts
import {ColDef} from 'ag-grid-enterprise';

export const columnDefs: ColDef[] = [
  {
    field: 'name',
    cellDataType: 'text',
    sortable: true,
  },
  {
    field: 'language',
    cellDataType: 'text',
    enablePivot: true,
    enableRowGroup: true,
  },
  {
    field: 'github_stars',
    headerName: 'GitHub Stars',
    cellDataType: 'number',
    enableValue: true,
  },
  {
    field: 'github_watchers',
    headerName: 'GitHub Watchers',
    cellDataType: 'number',
    enableValue: true,
  },
  {
    field: 'license',
    cellDataType: 'text',
    editable: false,
    enablePivot: true,
    enableRowGroup: true,
  },
  {
    field: 'week_issue_change',
    headerName: 'Issue Change',
    cellDataType: 'number',
    enableValue: true,
  },
  {
    field: 'created_at',
    headerName: 'Created',
    cellDataType: 'date',
  },
  {
    field: 'has_wiki',
    headerName: 'Has Wiki',
    cellDataType: 'boolean',
    enablePivot: true,
    enableRowGroup: true,
  },
  {
    field: 'updated_at',
    headerName: 'Updated',
    cellDataType: 'date',
  },
  {
    field: 'pushed_at',
    headerName: 'Pushed',
    cellDataType: 'date',
  },
  {
    field: 'description',
    cellDataType: 'text',
    sortable: false,
  },
  {
    field: 'open_issues_count',
    headerName: 'Open Issues',
    cellDataType: 'number',
    enableValue: true,
  },
  {
    field: 'closed_issues_count',
    headerName: 'Closed Issues',
    cellDataType: 'number',
    enableValue: true,
  },

  {
    field: 'open_pr_count',
    headerName: 'Open PRs',
    cellDataType: 'number',
    enableValue: true,
  },
  {
    field: 'closed_pr_count',
    headerName: 'Closed PRs',
    cellDataType: 'number',
    enableValue: true,
  },
  {
    field: 'has_projects',
    headerName: 'Has Projects',
    cellDataType: 'boolean',
  },
  {
    field: 'has_pages',
    headerName: 'Has Pages',
    cellDataType: 'boolean',
  },
  {
    field: 'topics',
    cellDataType: 'textArray',
    editable: false,
    sortable: false,
  },
  {
    field: 'id',
    cellDataType: 'number',
    hide: true,
    editable: false,
  },
];
```

### FAQ

**Why do I not see the Loading Screen?**
On a fast machine, the loading screen may only flash briefly, if at all.
To see it reliably, slow down `stateOptions.loadState` (as in demo above) or load a particularly large persisted state.