Loading spinner

[ArthurSmid]

When opening the index.html in a browser, it requires some time for the data to populate from Airtable and for a first-time visitor it could be confusing and I'd like to make sure we let people know the site doesn't intentionally have no content and that it's loading and will display soon. We need a bit of diagnosis first to figure out if the payload is super large and whether or not it's an issue to be solved in how the site calls from the database. If this turns out to require a loading spinner, I'm interested in writing the css for that.

Here are some open source loading graphics: https://loading.io/css/

And a how to build pure css spinners:
https://www.youtube.com/watch?v=BxpjA9t4dJE

[coatsd]

The option I was thinking of was to add an option element that says "loading" in each select box of the nav menu. That way the page pops up, and we can let the user know that the options are still loading. Once the data populates the select boxes, it will rewrite the elements and get rid of "loading". Maybe put an emphasis (em) around the "loading" content.

[ArthurSmid]

Good idea!

And a related but possibly different solution for the homepage, a first arrival to the site—this page really helped me realize why some websites have a loading spinner, the index.html, when you open that in a browser, the items that draw on data take a while to load and yet it displays the other content. I'm wondering what it'd look like to fill that table of contents area with space and have a loading spinner in the center for the moment that it takes to populate, or is it something to solve in how we do a call to the database?

[coatsd]

The loading spinner could work. We could also do the same with the content of the index page, and just give feedback that it's loading the body of index.

[colindavey]

I will probably be able to make that page's loading more efficient, which should help.

[ArthurSmid]

Interesting, the loading page for DemocracyLab displays (briefly) a Made Possible with Generous Support From and lists their sponsors: https://www.democracylab.org/index/?section=AboutProject&id=438