Svelte stores for auto detecting running AJAX requests and show Spinners with CSS animations
Channel: SpinSpire
Date: 2020-05-15

Implement AJAX counters (as stores) & spinners for Svelte using CSS animations, Svelte stores, and general purpose JavaScript wrapper functions that automatically detect and count all async requests running the app. Learn some advanced JavaScript, Svelte, and CS techniques.

Source code: https://bitbucket.org/spinspire/svelte-async-counter-spinner/

For questions, post a comment. For business inquiries, email info@spinspire.com.

TOC/Index
00:00 Intro & Overview
00:55 demo: 
02:20 project setup
05:10 Creating a Svelte spinner component using CSS animations
13:45 Making AJAX requests to the Chuck Norris joke API (http://api.icndb.com/jokes/random)
17:30 Adding another API to simulate slow AJAX response (http://slowwly.robertomurray.co.uk)
20:00 Naive implementation of controlling the spinner for AJAX
21:30 Better implementation with function wrappers
25:00 Replacing local variables with Svelte store based implementation
30:30 Separate general purpose implementation for wrapping any arbitrary function
37:15 Add support for caching and shareable stores
49:00 Multiple spinners wrapping multiple async functions
50:30 Conclusion, summary, and derived stores