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}