AJAX Loading Animation

[adriancollier]

We are currently utilising the API resource for generating pins for the Global Project maps and project page maps.

The process to collect all the data required for the maps take some time and has caused server issues during the previous release.

We have implemented a part-solution to collect the points on the map in 100 intervals, allowing the server to respond more effectively. But the process still takes too long to completely populate.

In addition to the API Caching solution being investigated in #136, we also have need of a loading animation that will ensure visitors are aware that the map is loading and is not complete.

This animation should:

• Display clearly that the loading of the map points is not completed
• Remove itself from the page once loading is completed
• Add any explanation of long loading times

This solution could also:

• Display the number of pins already loaded
• Display the number of pins in total
• Offer ability for user to stop the loading of pins

Any solution that has been found that covers these requirements should be presented as following:

• Outline of solution
• Additional libraries/resources to be used
• Notable dependencies
• Drawbacks or issues
• Estimation of implementation time
• Test case

[adriancollier]

We still need some sort of loading animation, but this should be looked at when we look at the loading of the pins.

Currently this is done in batches of 100 every few seconds - this is not ideal and not good. We should make a solution that populates all the pins at once.

Related to #240 although both of these issues will be closed with a new one created to log the actual issues (bad performance on Global Maps).