Loading indicator strategy

[adborden]

Because we fetch data from the API, there will be times where the app displays some content, but the data is not loaded. Here's an example of clicking https://adborden.github.io/odca-oakland/#!/locality/2?office_id=5 to get the City Council At-Large listing. There's a brief moment where you see some of the HTML structure:

This story is looking for a pattern or strategy on how to approach these data loading scenarios across the site.

There are a few subtleties I want to point out. Should the existing layout structure be completely hidden until the page is ready and take up no space or should the layout hold it's space, but be invisible? Hide text but not layout? Include spinner or progress indicator?

[elinaru]

Full page load progress: https://projects.invisionapp.com/share/J48NM1DH2#/screens/190014305

Main content column progress (sidebar has loaded): https://projects.invisionapp.com/share/J48NM1DH2#/screens/190014306