# Feature OP-9912 - Display a loading skeleton before actual content is fully loaded

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-9912

## Planning

| Attribute | Value |
| --- | --- |
| Date | 2021-11-01 – 2022-02-27 |
| Priority | Medium |
| Target versions | 12.1.0 |
| Sprint | 12.1.0 |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

The team planner sometimes takes a few seconds to load the actual content, during which time it gives the false impression of being empty.

This loading indicator communicates to the user that the view has not fully loaded, reducing the potential for confusion.

### **Acceptance criteria**

  - When a team planner is loaded, show a skeleton loading indicator over the calendar area
  - The skeleton elements should animate in the same way as the loading indicator in the Add Existing pane (see <mention class="mention" data-id="40031" data-type="work_package" data-text="#40031">\#40031</mention>).
  - Replace with assignees and actual cards once they are loaded.
  - Show the indicator again when loading a *different* team planner
  - ~~Show the indicator any time a lot of cards need to be loaded and when this requires time (like quickly changing the time frame and skipping ahead to 4 weeks for example)~~
      - This is not possible as we do not redraw fullcalendar when moving

### Visuals

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27673/content"></div></figure>