An exploration into loading and rendering the most suitable version of a component based on signals exposed to the web (network, CPU, memory etc).

This repo contains several different pieces for the Adaptive Loading project: React Hooks, patterns for adaptive loading with different Web Platform signals and full applications.

• Network-aware loading with create-react-app (demo)
• Network-aware only-if-cached loading with create-react-app (demo)
• Network-aware code-splitting with create-react-app (demo)
• Network-aware data-fetching with create-react-app (demo)
• Battery considerate loading with create-react-app (demo)
• Memory considerate loading with create-react-app (demo)
• Memory considerate loading (SketchFab version) with create-react-app (demo)
• Memory considerate animation-toggling with create-next-app (demo)
• Device-class aware code-splitting (demo, Moto G4, Galaxy S7)
• Hardware concurrency considerate code-splitting with create-react-app (demo)
• Hardware concurrency considerate loading with create-react-app (demo)
• UA-aware code-splitting with create-react-app (demo)
• DPR(Client Hint)-aware loading with node-app (demo)
• Memory(Client Hint) considerate loading with node-app (demo)
• Network(Client Hint)-aware loading with node-app (demo)
• Network & Memory(Client Hints) considerate loading with node-app (demo)

• React Twitter - save-data loading based on Client Hint (demo, WPT)
• React Twitter - save-data loading based on Hook (demo)

• React Movie - network-aware loading (demo)
• React Shrine - network-aware code-splitting (demo)
• React eBay - network-aware code-splitting (demo)
• React Dixie Mesh - memory considerate loading (demo)
• React Lottie - network-aware loading (demo)
• React Youtube - adaptive loading with mix of network, memory and hardware concurrency (demo)
• Next Show - adaptive loading with mix of network, memory and Client Hints (demo, WPT)

npm run build
npm run deploy

This project is brought to you by Addy Osmani and Anton Karlovskiy.