import React, {Placeholder, PureComponent} from 'react'; import {unstable_deferredUpdates} from 'react-dom'; import {createResource} from 'simple-cache-provider'; import {cache} from '../cache'; import Spinner from './Spinner'; import ContributorListPage from './ContributorListPage'; const UserPageResource = createResource(() => import('./UserPage')); function UserPageLoader(props) { const UserPage = UserPageResource.read(cache).default; return <UserPage {...props} />; } export default class App extends PureComponent { state = { currentId: null, showDetail: false, }; componentDidUpdate(prevProps, prevState) { if ( prevState.showDetail !== this.state.showDetail || (prevState.currentId !== this.state.currentId && this.state.showDetail) ) { window.scrollTo(0, 0); } } handleUserClick = id => { this.setState({
import React, { Placeholder } from "react"; import { cache } from "./lib/cache"; import { createResource } from "simple-cache-provider"; import { Router, Link } from "@reach/router"; let ContactsResource = createResource(async path => { let response = await fetch(`https://contacts.now.sh${path}`); let json = await response.json(); return json; }); let ImageResource = createResource(src => { return new Promise(resolve => { let img = new Image(); img.src = src; img.onload = () => { setTimeout(() => { resolve(src); }, 3000); }; }); }); function Img({ src, ...props }) { // eslint-disable-next-line jsx-a11y/alt-text return <img src={ImageResource.read(cache, src)} {...props} />; } function Home() { let { contacts } = ContactsResource.read(cache, "/contacts"); return (
``` 3. Finally, render a `Placeholder` (you'll need to import it from react) around `Img` with a `2000` delayMs, and then artificially delay your ImageResource by 3000ms with setTimeout. What happens when you click the links now? */ import React from "react"; import { cache } from "./lib/cache"; import { createResource } from "simple-cache-provider"; import { Router, Link } from "@reach/router"; let ContactsResource = createResource(async path => { let response = await fetch(`https://contacts.now.sh${path}`); let json = await response.json(); return json; }); function Home() { let { contacts } = ContactsResource.read(cache, "/contacts"); return ( <div> <h1>Contacts</h1> <ul> {contacts.map(contact => ( <li key={contact.id}> <Link to={contact.id}> {contact.first} {contact.last} </Link> </li>
import React, { Placeholder, PureComponent, Fragment } from "react"; import { unstable_deferredUpdates } from "react-dom"; import { createResource } from "simple-cache-provider"; import { cache } from "../cache"; import Spinner from "./Spinner"; import ContributorListPage from "./ContributorListPage"; import { Router, Link, Location } from "@reach/router"; import ManageScroll from "./ManageScroll"; const UserPageResource = createResource(() => import("./UserPage")); function UserPageLoader(props) { const UserPage = UserPageResource.read(cache).default; return <UserPage {...props} />; } class App extends PureComponent { state = { loadingId: null }; handleUserClick = id => { this.setState({ loadingId: id }); }; render() { const { loadingId } = this.state; return ( <Placeholder delayMs={1500} fallback={<Spinner size="large" />}> <ContributorListPage loadingId={loadingId}