diff --git a/08-suspense/lecture/src/workouts/Refactor.js b/08-suspense/lecture/src/App.Refactor.js
similarity index 75%
rename from 08-suspense/lecture/src/workouts/Refactor.js
rename to 08-suspense/lecture/src/App.Refactor.js
index 0c6dbf7..3de4a94 100644
--- a/08-suspense/lecture/src/workouts/Refactor.js
+++ b/08-suspense/lecture/src/App.Refactor.js
@@ -3,84 +3,23 @@
 
 import { createElement } from "glamor/react"; // eslint-disable-line
 /* @jsx createElement */
-import Spinner from "react-svg-spinner";
-import ManageScroll from "../components/ManageScroll";
 import React, { Placeholder } from "react";
 import { Router, Link } from "@reach/router";
-import Component from "@reach/component-component";
+import Spinner from "react-svg-spinner";
+import Competitions from "./lib/Competitions";
+import ManageScroll from "./lib/ManageScroll";
+import { cache } from "./lib/cache";
+
 import {
-  fetchWorkouts,
   fetchWorkout,
   fetchExercises,
   fetchNextWorkout,
-  WorkoutsResource,
-  WorkoutResource,
-  ExercisesResource,
-  NextWorkoutResource,
-  network
-} from "./utils";
-import { cache } from "../cache";
-let patience = 1;
-
-const link = {
-  display: "inline-block",
-  width: "200px",
-  height: "200px",
-  lineHeight: "200px",
-  background: "#f0f0f0",
-  textAlign: "center",
-  margin: "20px",
-  ":hover": {
-    background: "#ddd"
-  },
-  position: "relative"
-};
+  WorkoutsResource
+} from "./lib/utils";
 
-const Home = () => (
-  <div>
-    <h1 css={{ textAlign: "center" }}>Workout App!</h1>
-    <div
-      css={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <Link to="/workouts" css={link}>
-        Workouts
-      </Link>
-      <Link to="/competitions" css={link}>
-        Competitions
-      </Link>
-    </div>
-  </div>
-);
-
-const Workouts = () => {
-  const workouts = WorkoutsResource.read(cache, 10);
-  return (
-    <div>
-      <Link to="..">Home</Link>
-      <h1>Workouts</h1>
-      {workouts.map(workout => (
-        <Link key={workout.id} to={workout.id} css={link}>
-          {workout.name}
-        </Link>
-      ))}
-    </div>
-  );
-};
-
-const Competitions = () => <div>Competitions</div>;
-
-const LoadingSpinner = () => (
-  <div css={{ textAlign: "center", padding: 20 }}>
-    <Spinner size="100" />
-  </div>
-);
+let patience = 1;
 
 ///////////////////////////////////////////////////
-
 class Workout extends React.Component {
   state = {
     workout: null,
@@ -118,19 +57,13 @@ class Workout extends React.Component {
   }
 
   render() {
-    const { workoutId } = this.props;
     const { workout, exercises, nextWorkout } = this.state;
 
     return workout ? (
       <div>
-        <Link to="../..">Home</Link> /{" "}
-        <Link to="..">Workouts</Link>
+        <Link to="../..">Home</Link> / <Link to="..">Workouts</Link>
         <h1>{workout.name}</h1>
-        {exercises ? (
-          <Exercises exercises={exercises} />
-        ) : (
-          <Spinner />
-        )}
+        {exercises ? <Exercises exercises={exercises} /> : <Spinner />}
         {workout.completed &&
           (nextWorkout ? (
             <NextWorkout nextWorkout={nextWorkout} />
@@ -146,24 +79,65 @@ class Workout extends React.Component {
   }
 }
 
-const Exercises = ({ exercises }) => {
+////////////////////////////////////////////////////////////
+const link = {
+  display: "inline-block",
+  width: "200px",
+  height: "200px",
+  lineHeight: "200px",
+  background: "#f0f0f0",
+  textAlign: "center",
+  margin: "20px",
+  ":hover": {
+    background: "#ddd"
+  },
+  position: "relative"
+};
+
+const Home = () => (
+  <div>
+    <h1 css={{ textAlign: "center" }}>Workout App!</h1>
+    <div
+      css={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Link to="/workouts" css={link}>
+        Workouts
+      </Link>
+      <Link to="/competitions" css={link}>
+        Competitions
+      </Link>
+    </div>
+  </div>
+);
+
+const Workouts = () => {
+  const workouts = WorkoutsResource.read(cache, 10);
   return (
-    <ul>
-      {exercises.map((exercise, i) => (
-        <li key={i}>{exercise}</li>
+    <div>
+      <Link to="..">Home</Link>
+      <h1>Workouts</h1>
+      {workouts.map(workout => (
+        <Link key={workout.id} to={workout.id} css={link}>
+          {workout.name}
+        </Link>
       ))}
-    </ul>
+    </div>
   );
 };
 
+const Exercises = ({ exercises }) => {
+  return <ul>{exercises.map((exercise, i) => <li key={i}>{exercise}</li>)}</ul>;
+};
+
 const NextWorkout = ({ nextWorkout }) => {
   return (
     <div>
       <h2>
-        Up Next!{" "}
-        <Link to={`../${nextWorkout.id}`}>
-          {nextWorkout.name}
-        </Link>
+        Up Next! <Link to={`../${nextWorkout.id}`}>{nextWorkout.name}</Link>
       </h2>
     </div>
   );
@@ -171,10 +145,7 @@ const NextWorkout = ({ nextWorkout }) => {
 
 const App = () => {
   return (
-    <Placeholder
-      delayMs={patience}
-      fallback={<Spinner size="100" />}
-    >
+    <Placeholder delayMs={patience} fallback={<Spinner size="100" />}>
       <ManageScroll />
       <Router style={{ padding: 20 }}>
         <Home path="/" />
diff --git a/08-suspense/lecture/src/workouts/AppOld.js b/08-suspense/lecture/src/App.js
similarity index 51%
rename from 08-suspense/lecture/src/workouts/AppOld.js
rename to 08-suspense/lecture/src/App.js
index 33ba5e3..30c7b06 100644
--- a/08-suspense/lecture/src/workouts/AppOld.js
+++ b/08-suspense/lecture/src/App.js
@@ -1,27 +1,31 @@
 import { createElement } from "glamor/react"; // eslint-disable-line
 /* @jsx createElement */
-import "./index.css";
-import Spinner from "react-svg-spinner";
-import ManageScroll from "../components/ManageScroll";
-import React, { Placeholder } from "react";
+import React, { Placeholder, lazy } from "react";
 import { Router, Link } from "@reach/router";
 import Component from "@reach/component-component";
+import Spinner from "react-svg-spinner";
+import ManageScroll from "./lib/ManageScroll";
 import {
-  readWorkouts,
-  readWorkout,
-  readExercises,
-  readNextWorkout,
-  patience
-} from "./utils";
-// import Img, { preload as preloadImg } from "./Img";
-import { cache } from "../cache";
+  WorkoutsResource,
+  WorkoutResource,
+  ExercisesResource,
+  NextWorkoutResource,
+  network
+} from "./lib/utils";
+import { cache } from "./lib/cache";
+
+const Competitions = lazy(() => import("./lib/Competitions"));
+
+let qpatience = [5000, 5000, 1, 1, 2000, 2000, 2000];
+let search = window.location.search.substr(1);
+let patience = qpatience[search] || 10000;
 
 const link = {
   display: "inline-block",
   width: "200px",
   height: "200px",
   lineHeight: "200px",
-  background: "#fff",
+  background: "#eee",
   textAlign: "center",
   margin: "20px",
   ":hover": {
@@ -30,26 +34,7 @@ const link = {
   position: "relative"
 };
 
-const Home = () => (
-  <div>
-    <h1 css={{ textAlign: "center" }}>Workout App!</h1>
-    <div
-      css={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <Link to="/workouts" css={link}>
-        Workouts
-      </Link>
-      <Link to="/competitions" css={link}>
-        Competitions
-      </Link>
-    </div>
-  </div>
-);
-
+// use ?1
 const LoadingLink = ({ children, ...props }) => (
   <Component initialState={{ isLoading: false }}>
     {({ state, setState }) => (
@@ -79,63 +64,78 @@ const LoadingLink = ({ children, ...props }) => (
   </Component>
 );
 
+const Home = () => (
+  <div>
+    <h1 css={{ textAlign: "center" }}>Workout App!</h1>
+    <div
+      css={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Link to="/workouts" css={link}>
+        Workouts
+      </Link>
+      <Link to="/competitions" css={link}>
+        Competitions
+      </Link>
+    </div>
+  </div>
+);
+
 const Workouts = () => {
-  const workouts = readWorkouts.read(cache, 10);
+  const workouts = WorkoutsResource.read(cache, 10);
   return (
     <div>
       <Link to="..">Home</Link>
       <h1>Workouts</h1>
       {workouts.map(workout => (
-        <Link key={workout.id} to={workout.id} css={link}>
+        <LoadingLink key={workout.id} to={workout.id} css={link}>
           {workout.name}
-        </Link>
+        </LoadingLink>
       ))}
     </div>
   );
 };
 
 const Exercises = ({ workoutId }) => {
-  const exercises = readExercises.read(cache, workoutId);
-  return (
-    <ul>
-      {exercises.map((exercise, i) => (
-        <li key={i}>{exercise}</li>
-      ))}
-    </ul>
-  );
+  const exercises = ExercisesResource.read(cache, workoutId);
+  return <ul>{exercises.map((exercise, i) => <li key={i}>{exercise}</li>)}</ul>;
 };
 
-const Workout = ({ workoutId }) => {
-  readNextWorkout.preload(cache, workoutId);
-  readWorkout.preload(cache, workoutId);
-  readExercises.preload(cache, workoutId);
-  const workout = readWorkout.read(cache, workoutId);
+class Workout extends React.Component {
+  render() {
+    const { workoutId } = this.props;
 
-  return (
-    <div>
-      <Link to="../..">Home</Link> / <Link to="..">Workouts</Link>
-      <h1>{workout.name}</h1>
-      <Placeholder delayMs={patience} fallback={<Spinner size="150" />}>
-        <Exercises workoutId={workoutId} />
-      </Placeholder>
-      {workout.completed && (
-        <Placeholder
-          delayMs={patience}
-          fallback={
-            <h2>
-              Up Next! <Spinner size="0.75em" />
-            </h2>
-          }
-        >
-          <NextWorkout workoutId={workoutId} />
+    const workout = WorkoutResource.read(cache, workoutId);
+
+    return (
+      <div>
+        <Link to="../..">Home</Link> / <Link to="..">Workouts</Link>
+        <h1>{workout.name}</h1>
+        <Placeholder delayMs={patience} fallback={<Spinner size="150" />}>
+          <Exercises workoutId={workoutId} />
         </Placeholder>
-      )}
-    </div>
-  );
-};
+        {workout.completed && (
+          <Placeholder
+            delayMs={patience}
+            fallback={
+              <h2>
+                Up Next! <Spinner size="0.75em" />
+              </h2>
+            }
+          >
+            <NextWorkout workoutId={workoutId} />
+          </Placeholder>
+        )}
+      </div>
+    );
+  }
+}
 
 const NextWorkout = ({ workoutId }) => {
-  const nextWorkout = readNextWorkout.read(cache, workoutId);
+  const nextWorkout = NextWorkoutResource.read(cache, workoutId);
   return (
     <div>
       <h2>
@@ -145,25 +145,40 @@ const NextWorkout = ({ workoutId }) => {
   );
 };
 
-const Competitions = () => <div>Competitions</div>;
-
 const LoadingSpinner = () => (
   <div css={{ textAlign: "center", padding: 20 }}>
     <Spinner size="100" />
   </div>
 );
 
+const Network = () => (
+  <div
+    style={{
+      fontWeight: "bold",
+      fontSize: 30,
+      position: "fixed",
+      bottom: 20,
+      right: 20
+    }}
+  >
+    Network: {network}
+  </div>
+);
+
 const App = () => {
   return (
-    <Placeholder delayMs={patience} fallback={<Spinner size="100" />}>
-      <ManageScroll />
-      <Router style={{ padding: 20 }}>
-        <Home path="/" />
-        <Workouts path="workouts" />
-        <Workout path="workouts/:workoutId" />
-        <Competitions path="competitions" />
-      </Router>
-    </Placeholder>
+    <React.Fragment>
+      <Placeholder delayMs={patience} fallback={<Spinner size="100" />}>
+        <ManageScroll />
+        <Router style={{ padding: 20 }}>
+          <Home path="/" />
+          <Workouts path="workouts" />
+          <Workout path="workouts/:workoutId" />
+          <Competitions path="competitions" />
+        </Router>
+      </Placeholder>
+      <Network />
+    </React.Fragment>
   );
 };
 
diff --git a/08-suspense/lecture/src/api/data.js b/08-suspense/lecture/src/api/data.js
deleted file mode 100644
index 67fd371..0000000
--- a/08-suspense/lecture/src/api/data.js
+++ /dev/null
@@ -1,364 +0,0 @@
-export const coreContributorListJSON = [
-  {
-    id: "acdlite",
-    name: "Andrew Clark"
-  },
-  {
-    id: "bvaughn",
-    name: "Brian Vaughn"
-  },
-  {
-    id: "gaearon",
-    name: "Dan Abramov"
-  },
-  {
-    id: "trueadm",
-    name: "Dominic Gannaway"
-  },
-  {
-    id: "flarnie",
-    name: "Flarnie Marchan"
-  },
-  {
-    id: "sebmarkbage",
-    name: "Sebastian Markbåge"
-  },
-  {
-    id: "sophiebits",
-    name: "Sophie Alpert"
-  },
-  {
-    id: "ryanflorence",
-    name: "Ryan Florence"
-  }
-];
-
-export const userProfileJSON = {
-  ryanflorence: {
-    id: "ryanflorence",
-    name: "Ryan Florence",
-    image: "/img/ryanflorence.jpeg",
-    location: "Seattle, WA",
-    email: "hello@reach.tech",
-    tagline: "Not React core at Facebook. Hi!"
-  },
-  acdlite: {
-    id: "acdlite",
-    name: "Andrew Clark",
-    image: "/img/acdlite.jpeg",
-    location: "Redwood City, CA",
-    email: "acdlite@me.com",
-    tagline: "React core at Facebook. Hi!"
-  },
-  bvaughn: {
-    id: "bvaughn",
-    name: "Brian Vaughn",
-    image: "/img/bvaughn.jpeg",
-    location: "Mountain View, CA",
-    email: "brian.david.vaughn@gmail.com",
-    tagline:
-      "React JS core team at @facebook; formerly at @treasure-data and @google."
-  },
-  gaearon: {
-    id: "gaearon",
-    name: "Dan Abramov",
-    image: "/img/gaearon.jpeg",
-    location: "London, UK",
-    email: "dan.abramov@me.com",
-    tagline:
-      "Working on @reactjs. Co-author of Redux and Create React App. Building tools for humans."
-  },
-  flarnie: {
-    id: "flarnie",
-    name: "Flarnie Marchan",
-    image: "/img/flarnie.jpeg",
-    location: "Oakland, CA",
-    email: null,
-    tagline:
-      "Software Engineer at Facebook React Core Team & Co-maintainer of Draft.js"
-  },
-  sebmarkbage: {
-    id: "sebmarkbage",
-    name: "Sebastian Markbåge",
-    image: "/img/sebmarkbage.jpeg",
-    location: "San Francisco",
-    email: "sebastian@calyptus.eu",
-    tagline: null
-  },
-  sophiebits: {
-    id: "sophiebits",
-    name: "Sophie Alpert",
-    image: "/img/sophiebits.jpeg",
-    location: "California",
-    email: "hi@sophiebits.com",
-    tagline:
-      "I like fixing things. eng manager of @reactjs at Facebook. ex-@khanacademy. 💎🌸 she/her. kindness, intersectional feminism, music."
-  },
-  trueadm: {
-    id: "trueadm",
-    name: "Dominic Gannaway",
-    image: "/img/trueadm.jpeg",
-    location: "London, United Kingdom",
-    email: null,
-    tagline:
-      "Currently an engineer on the React core team at @facebook. Author of @infernojs and t7. Enjoys coding + being a Dad."
-  }
-};
-export const userRepositoriesListJSON = {
-  ryanflorence: [
-    {
-      name: "Reach Router",
-      url: "https://github.com/reach/router",
-      description: "Next Generation Routing for React.js"
-    },
-    {
-      name: "Reach UI",
-      url: "https://github.com/reach/reach-ui",
-      description: "The Missing (Accessible) Components for React Web."
-    },
-    {
-      name: "React Component Component",
-      url: "https://github.com/reactions/component",
-      description:
-        "Dynamic React Component Definitions. A joke component turned awesome."
-    }
-  ],
-  acdlite: [
-    {
-      name: "recompose",
-      url: "https://github.com/acdlite/recompose",
-      description:
-        "A React utility belt for function components and higher-order components."
-    },
-    {
-      name: "react-fiber-architecture",
-      url: "https://github.com/acdlite/react-fiber-architecture",
-      description: "A description of React's new core algorithm, React Fiber"
-    },
-    {
-      name: "redux-router",
-      url: "https://github.com/acdlite/redux-router",
-      description:
-        "Redux bindings for React Router – keep your router state inside your Redux store"
-    },
-    {
-      name: "flummox",
-      url: "https://github.com/acdlite/flummox",
-      description: "Minimal, isomorphic Flux."
-    },
-    {
-      name: "redux-rx",
-      url: "https://github.com/acdlite/redux-rx",
-      description: "RxJS utilities for Redux."
-    },
-    {
-      name: "react-remarkable",
-      url: "https://github.com/acdlite/react-remarkable",
-      description: "A React component for rendering Markdown with remarkable"
-    }
-  ],
-  bvaughn: [
-    {
-      name: "react-virtualized",
-      url: "https://github.com/bvaughn/react-virtualized",
-      description:
-        "React components for efficiently rendering large lists and tabular data"
-    },
-    {
-      name: "redux-search",
-      url: "https://github.com/bvaughn/redux-search",
-      description: "Redux bindings for client-side search"
-    },
-    {
-      name: "react-window",
-      url: "https://github.com/bvaughn/react-window",
-      description:
-        "React components for efficiently rendering large lists and tabular data"
-    },
-    {
-      name: "react-virtualized-select",
-      url: "https://github.com/bvaughn/react-virtualized-select",
-      description:
-        "HOC that uses react-virtualized and react-select to display large lists of options in a drop-down"
-    },
-    {
-      name: "js-search",
-      url: "https://github.com/bvaughn/js-search",
-      description:
-        "JS Search is an efficient, client-side search library for JavaScript and JSON objects"
-    },
-    {
-      name: "react-highlight-words",
-      url: "https://github.com/bvaughn/react-highlight-words",
-      description:
-        "React component to highlight words within a larger body of text"
-    }
-  ],
-  gaearon: [
-    {
-      name: "facebook/react",
-      url: "https://github.com/facebook/react",
-      description:
-        "A declarative, efficient, and flexible JavaScript library for building user interfaces."
-    },
-    {
-      name: "reduxjs/redux",
-      url: "https://github.com/reduxjs/redux",
-      description: "Predictable state container for JavaScript apps"
-    },
-    {
-      name: "facebook/create-react-app",
-      url: "https://github.com/facebook/create-react-app",
-      description: "Create React apps with no build configuration."
-    },
-    {
-      name: "reduxjs/redux-devtools",
-      url: "https://github.com/reduxjs/redux-devtools",
-      description:
-        "DevTools for Redux with hot reloading, action replay, and customizable UI"
-    },
-    {
-      name: "react-dnd/react-dnd",
-      url: "https://github.com/react-dnd/react-dnd",
-      description: "Drag and Drop for React"
-    },
-    {
-      name: "paularmstrong/normalizr",
-      url: "https://github.com/paularmstrong/normalizr",
-      description: "Normalizes nested JSON according to a schema"
-    }
-  ],
-  flarnie: [
-    {
-      name: "diffux/diffux",
-      url: "https://github.com/diffux/diffux",
-      description: "Perceptual diffs of responsive screenshots made simple."
-    },
-    {
-      name: "facebook/draft-js",
-      url: "https://github.com/facebook/draft-js",
-      description: "A React framework for building text editors."
-    },
-    {
-      name: "facebook/react",
-      url: "https://github.com/facebook/react",
-      description:
-        "A declarative, efficient, and flexible JavaScript library for building user interfaces."
-    },
-    {
-      name: "facebook/jest",
-      url: "https://github.com/facebook/jest",
-      description: "🃏 Delightful JavaScript Testing."
-    },
-    {
-      name: "Galooshi/import-js",
-      url: "https://github.com/Galooshi/import-js",
-      description: "A tool to simplify importing JS modules"
-    },
-    {
-      name: "webpack_rails_demo",
-      url: "https://github.com/flarnie/webpack_rails_demo",
-      description: "Setting up webpack with Ruby on Rails: a basic demo"
-    }
-  ],
-  sebmarkbage: [
-    {
-      name: "art",
-      url: "https://github.com/sebmarkbage/art",
-      description:
-        "Retained mode vector drawing API designed for multiple output modes. There's also a built-in SVG parser."
-    },
-    {
-      name: "ecmascript-immutable-data-structures",
-      url:
-        "https://github.com/sebmarkbage/ecmascript-immutable-data-structures",
-      description: null
-    },
-    {
-      name: "ocamlrun-wasm",
-      url: "https://github.com/sebmarkbage/ocamlrun-wasm",
-      description: "OCamlrun WebAssembly - OCaml Bytecode Interpreter in WASM"
-    },
-    {
-      name: "ecmascript-generator-expression",
-      url: "https://github.com/sebmarkbage/ecmascript-generator-expression",
-      description:
-        "Proposal for do Generator Expressions in ECMAScript. Work in progress. Edit Add topics"
-    },
-    {
-      name: "ecmascript-undefined-propagation",
-      url: "https://github.com/sebmarkbage/ecmascript-undefined-propagation",
-      description:
-        "ECMAScript proposal to relax the rules to return `undefined` for property access on `null` or `undefined` instead of throwing."
-    },
-    {
-      name: "ecmascript-shallow-equal",
-      url: "https://github.com/sebmarkbage/ecmascript-shallow-equal",
-      description: "A proposal for ECMAScript for Object.shallowEqual"
-    }
-  ],
-  sophiebits: [
-    {
-      name: "facebook/react",
-      url: "https://github.com/facebook/react",
-      description:
-        "A declarative, efficient, and flexible JavaScript library for building user interfaces."
-    },
-    {
-      name: "Khan/KaTeX",
-      url: "https://github.com/Khan/KaTeX",
-      description: "Fast math typesetting for the web."
-    },
-    {
-      name: "facebook/react-devtools",
-      url: "https://github.com/facebook/react-devtools",
-      description:
-        "An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools."
-    },
-    {
-      name: "vim-awesome/vim-awesome",
-      url: "https://github.com/vim-awesome/vim-awesome",
-      description: "Awesome Vim plugins from across the universe"
-    },
-    {
-      name: "facebook/draft-js",
-      url: "https://github.com/facebook/draft-js",
-      description: "A React framework for building text editors."
-    },
-    {
-      name: "es3ify",
-      url: "https://github.com/sophiebits/es3ify",
-      description:
-        "Browserify transform to convert ES5 syntax to be ES3-compatible."
-    }
-  ],
-  trueadm: [
-    {
-      name: "facebook/react",
-      url: "https://github.com/facebook/react",
-      description:
-        "A declarative, efficient, and flexible JavaScript library for building user interfaces."
-    },
-    {
-      name: "infernojs/inferno",
-      url: "https://github.com/infernojs/inferno",
-      description:
-        "An extremely fast, React-like JavaScript library for building modern user interfaces"
-    },
-    {
-      name: "facebook/prepack",
-      url: "https://github.com/facebook/prepack",
-      description: "A JavaScript bundle optimizer."
-    },
-    {
-      name: "t7",
-      url: "https://github.com/trueadm/t7",
-      description: "Lightweight virtual DOM templating library"
-    },
-    {
-      name: "infernojs/babel-plugin-inferno",
-      url: "https://github.com/infernojs/babel-plugin-inferno",
-      description: null
-    }
-  ]
-};
diff --git a/08-suspense/lecture/src/api/index.js b/08-suspense/lecture/src/api/index.js
deleted file mode 100644
index 37d8f43..0000000
--- a/08-suspense/lecture/src/api/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-  coreContributorListJSON,
-  userProfileJSON,
-  userRepositoriesListJSON
-} from "./data";
-
-export function fetchCoreContributorListJSON() {
-  return makeFakeAPICall("/react/contributors", coreContributorListJSON);
-}
-
-export function fetchUserProfileJSON(id) {
-  return makeFakeAPICall(`/${id}/details`, userProfileJSON[id]);
-}
-
-export function fetchUserRepositoriesListJSON(id) {
-  return makeFakeAPICall(`/${id}/repositories`, userRepositoriesListJSON[id]);
-}
-
-let fakeRequestTime = 3000;
-let onProgress = () => true;
-
-export function setFakeRequestTime(val) {
-  fakeRequestTime = val;
-}
-
-export function setProgressHandler(handler) {
-  onProgress = handler;
-}
-
-export function setPauseNewRequests(value) {
-  shouldPauseNewRequests = value;
-}
-
-let shouldPauseNewRequests = false;
-let notifiers = {};
-let isPausedUrl = {};
-
-export function setPaused(url, isPaused) {
-  const wasPaused = isPausedUrl[url];
-  isPausedUrl[url] = isPaused;
-  if (isPaused !== wasPaused) {
-    notifiers[url]();
-  }
-}
-
-function makeFakeAPICall(url, result) {
-  let i = 1;
-  return new Promise(resolve => {
-    isPausedUrl[url] = shouldPauseNewRequests;
-    function notify() {
-      if (!isPausedUrl[url]) {
-        i++;
-      }
-      onProgress(url, i, isPausedUrl[url]);
-      if (isPausedUrl[url]) {
-        return;
-      }
-      if (i === 100) {
-        resolve(result);
-      } else {
-        setTimeout(notify, fakeRequestTime / 100);
-      }
-    }
-    notifiers[url] = notify;
-    notify();
-  });
-}
diff --git a/08-suspense/lecture/src/components/App.js b/08-suspense/lecture/src/components/App.js
deleted file mode 100644
index 7854e66..0000000
--- a/08-suspense/lecture/src/components/App.js
+++ /dev/null
@@ -1,70 +0,0 @@
-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}
-          onUserClick={this.handleUserClick}
-        />
-      </Placeholder>
-    );
-  }
-}
-
-class Detail extends PureComponent {
-  render() {
-    const { id } = this.props;
-    return (
-      <div>
-        <Link
-          to="/"
-          onClick={this.handleBackClick}
-          style={{
-            display: "block",
-            padding: "1rem 0"
-          }}
-        >
-          Return to list
-        </Link>
-        <Placeholder delayMs={2000} fallback={<Spinner size="large" />}>
-          <UserPageLoader id={id} />
-        </Placeholder>
-      </div>
-    );
-  }
-}
-
-export default () => (
-  <Fragment>
-    <ManageScroll />
-    <Router>
-      <App path="/" />
-      <Detail path="/:id" />
-    </Router>
-  </Fragment>
-);
diff --git a/08-suspense/lecture/src/components/ContributorListPage.js b/08-suspense/lecture/src/components/ContributorListPage.js
deleted file mode 100644
index 3da8844..0000000
--- a/08-suspense/lecture/src/components/ContributorListPage.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { Fragment } from "react";
-import { createResource } from "simple-cache-provider";
-import { cache } from "../cache";
-import Spinner from "./Spinner";
-import { fetchCoreContributorListJSON } from "../api";
-import { Link } from "@reach/router";
-
-const ContributorListResource = createResource(fetchCoreContributorListJSON);
-
-const ContributorListPage = ({ loadingId, onUserClick }) => (
-  <Fragment>
-    <h1 style={{ margin: 0, padding: "1rem 0" }}>React Core Team</h1>
-    <ul
-      style={{
-        display: "grid",
-        gridGap: "0.5rem",
-        gridTemplateColumns: "repeat(auto-fill, 20rem)",
-        padding: 0,
-        margin: 0
-      }}
-    >
-      {ContributorListResource.read(cache).map(user => (
-        <ContributorListItem
-          key={user.id}
-          onClick={() => onUserClick(user.id)}
-          isLoading={loadingId && user.id === loadingId}
-          user={user}
-        />
-      ))}
-    </ul>
-  </Fragment>
-);
-
-const ContributorListItem = ({ isLoading, onClick, user }) => (
-  <li
-    onClick={onClick}
-    style={{
-      padding: 0,
-      listStyleType: "none"
-    }}
-  >
-    <Link
-      to={user.id}
-      style={{
-        color: "inherit",
-        textDecoration: "none",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "1rem",
-        backgroundColor: "var(--color-buttonBg)",
-        border: "1px solid var(--color-buttonBorder)",
-        borderRadius: "1rem",
-        opacity: isLoading === false ? 0.5 : 1,
-        cursor: isLoading ? "default" : "pointer"
-      }}
-    >
-      <div>
-        <strong>{user.name}</strong>
-        <div style={{ marginTop: "0.5rem" }}>{user.id}</div>
-      </div>
-      {isLoading ? (
-        <Spinner size="small" />
-      ) : (
-        <svg width="24" height="24" viewBox="0 0 24 24">
-          <path fill="none" d="M0 0h24v24H0z" />
-          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-        </svg>
-      )}
-    </Link>
-  </li>
-);
-
-export default ContributorListPage;
diff --git a/08-suspense/lecture/src/components/Spinner.css b/08-suspense/lecture/src/components/Spinner.css
deleted file mode 100644
index 552c85b..0000000
--- a/08-suspense/lecture/src/components/Spinner.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.Spinner {
-  animation: rotate 1.3s linear infinite;
-}
-
-.SpinnerContainer-large {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(270deg); }
-}
-
-.SmallSpinnerPath {
-  stroke-dasharray: 100;
-  stroke-dashoffset: 0;
-  transform-origin: center;
-  animation:
-    SmallDash 1.3s ease-in-out infinite;
-}
-
-@keyframes SmallDash {
- 0% { stroke-dashoffset: 100; }
- 50% {
-   stroke-dashoffset: 50;
-   transform:rotate(135deg);
- }
- 100% {
-   stroke-dashoffset: 100;
-   transform:rotate(450deg);
- }
-}
-
-.MediumSpinnerPath {
-  stroke-dasharray: 150;
-  stroke-dashoffset: 0;
-  transform-origin: center;
-  animation:
-    MediumDash 1.3s ease-in-out infinite;
-}
-
-@keyframes MediumDash {
- 0% { stroke-dashoffset: 150; }
- 50% {
-   stroke-dashoffset: 50;
-   transform:rotate(135deg);
- }
- 100% {
-   stroke-dashoffset: 150;
-   transform:rotate(450deg);
- }
-}
-
-.LargeSpinnerPath {
-  stroke-dasharray: 200;
-  stroke-dashoffset: 0;
-  transform-origin: center;
-  animation:
-    LargeDash 1.3s ease-in-out infinite;
-}
-
-@keyframes LargeDash {
- 0% { stroke-dashoffset: 200; }
- 50% {
-   stroke-dashoffset: 50;
-   transform:rotate(135deg);
- }
- 100% {
-   stroke-dashoffset: 200;
-   transform:rotate(450deg);
- }
-}
diff --git a/08-suspense/lecture/src/components/Spinner.js b/08-suspense/lecture/src/components/Spinner.js
deleted file mode 100644
index 8ea7251..0000000
--- a/08-suspense/lecture/src/components/Spinner.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import './Spinner.css';
-
-const SPINNER_SIZES = {
-  small: 30,
-  medium: 50,
-  large: 70,
-};
-
-const STROKE_WIDTHS = {
-  small: 4,
-  medium: 5,
-  large: 6,
-};
-
-const PATH_CLASS_NAMES = {
-  small: 'SmallSpinnerPath',
-  medium: 'MediumSpinnerPath',
-  large: 'LargeSpinnerPath',
-};
-
-// Heavily inspired by https://codepen.io/mrrocks/pen/EiplA
-export default function Spinner({size = 'small'}) {
-  const baseSize = SPINNER_SIZES[size];
-  const pathSize = baseSize / 2;
-  const strokeWidth = STROKE_WIDTHS[size];
-  const pathRadius = `${baseSize / 2 - strokeWidth}px`;
-  const className = PATH_CLASS_NAMES[size];
-  const containerClassName = `SpinnerContainer SpinnerContainer-${size}`;
-
-  return (
-    <div className={containerClassName}>
-      <svg
-        className={className}
-        width={baseSize}
-        height={baseSize}
-        viewBox={`0 0 ${baseSize} ${baseSize}`}>
-        <circle
-          className="SpinnerPath"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={strokeWidth}
-          strokeLinecap="round"
-          cx={pathSize}
-          cy={pathSize}
-          r={pathRadius}
-        />
-      </svg>
-    </div>
-  );
-}
diff --git a/08-suspense/lecture/src/components/UserPage.js b/08-suspense/lecture/src/components/UserPage.js
deleted file mode 100644
index a1b96de..0000000
--- a/08-suspense/lecture/src/components/UserPage.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, {Placeholder} from 'react';
-import {createResource} from 'simple-cache-provider';
-import Spinner from './Spinner';
-import {cache} from '../cache';
-import {fetchUserProfileJSON, fetchUserRepositoriesListJSON} from '../api';
-
-export default function UserPage({id}) {
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, 20rem)',
-        gridGap: '1rem',
-        alignItems: 'start',
-      }}>
-      <UserDetails id={id} />
-      <Placeholder delayMs={2000} fallback={<Spinner size="medium" />}>
-        <Repositories id={id} />
-      </Placeholder>
-    </div>
-  );
-}
-
-const UserDetailsResource = createResource(fetchUserProfileJSON);
-
-function UserDetails({id}) {
-  const user = UserDetailsResource.read(cache, id);
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridGap: '0.5rem',
-        width: '20rem',
-        padding: '1rem',
-        backgroundColor: 'var(--color-buttonBg)',
-        border: '1px solid var(--color-buttonBorder)',
-        borderRadius: '1rem',
-      }}>
-      <UserPicture source={user.image} />
-      <div
-        style={{
-          fontSize: '1.5rem',
-          fontWeight: 'bold',
-          color: 'var(--color-pageTextDark)',
-        }}>
-        {user.name}
-      </div>
-      <div style={{fontSize: '1.25rem'}}>{user.id}</div>
-      {user.tagline !== null && <div>{user.tagline}</div>}
-      <hr
-        style={{
-          width: '100%',
-          height: '1px',
-          border: 'none',
-          backgroundColor: '#ddd',
-        }}
-      />
-      {user.location && <Location location={user.location} />}
-      {user.email && <Email email={user.email} />}
-    </div>
-  );
-}
-
-const Location = ({location}) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-    }}>
-    <svg
-      viewBox="0 0 24 24"
-      style={{
-        width: '24px',
-        height: '24px',
-        marginRight: '0.5rem',
-        fill: 'currentColor',
-      }}>
-      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </svg>
-    {location}
-  </div>
-);
-
-const Email = ({email}) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-    }}>
-    <svg
-      viewBox="0 0 24 24"
-      style={{
-        width: '24px',
-        height: '24px',
-        marginRight: '0.5rem',
-        fill: 'currentColor',
-      }}>
-      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </svg>
-    <a href={`mailto:${email}`}>{email}</a>
-  </div>
-);
-
-const ImageResource = createResource(
-  src =>
-    new Promise(resolve => {
-      const img = new Image();
-      img.onload = () => resolve(src);
-      img.src = src;
-    })
-);
-
-function Img({src, alt, ...rest}) {
-  return <img src={ImageResource.read(cache, src)} alt={alt} {...rest} />;
-}
-
-function UserPicture({source}) {
-  return (
-    <Placeholder delayMs={1500} fallback={<img src={source} alt="poster" />}>
-      <Img
-        src={source}
-        alt="profile picture"
-        style={{
-          width: '100%',
-          height: 'auto',
-          borderRadius: '0.5rem',
-        }}
-      />
-    </Placeholder>
-  );
-}
-
-const UserRepositoriesResource = createResource(fetchUserRepositoriesListJSON);
-
-function Repositories({id}) {
-  const repos = UserRepositoriesResource.read(cache, id);
-  return (
-    <ul
-      style={{
-        display: 'grid',
-        gridGap: '1rem',
-        padding: 0,
-        margin: 0,
-      }}>
-      {repos.map(repo => <Repository key={repo.name} {...repo} />)}
-    </ul>
-  );
-}
-
-function Repository({description, name, url}) {
-  return (
-    <li
-      style={{
-        display: 'grid',
-        gridGap: '0.5rem',
-        padding: '1rem',
-        backgroundColor: 'var(--color-buttonBg)',
-        border: '1px solid var(--color-buttonBorder)',
-        borderRadius: '1rem',
-      }}>
-      <strong>
-        <a href={url}>{name}</a>
-      </strong>
-      <div>{description}</div>
-    </li>
-  );
-}
diff --git a/08-suspense/lecture/src/favicon.ico b/08-suspense/lecture/src/favicon.ico
deleted file mode 100644
index d392c1d..0000000
Binary files a/08-suspense/lecture/src/favicon.ico and /dev/null differ
diff --git a/08-suspense/lecture/src/index.js b/08-suspense/lecture/src/index.js
index 371346d..2f3ead7 100644
--- a/08-suspense/lecture/src/index.js
+++ b/08-suspense/lecture/src/index.js
@@ -1,8 +1,6 @@
-import "./index.css";
+import "./lib/index.css";
 import React from "react";
 import { unstable_createRoot } from "react-dom";
-// import App from "./components/App";
-// import App from "./workouts/App";
-import App from "./workouts/Refactor";
+import App from "./App";
 
 unstable_createRoot(document.getElementById("root")).render(<App />);
diff --git a/08-suspense/lecture/src/workouts/Competitions.js b/08-suspense/lecture/src/lib/Competitions.js
similarity index 100%
rename from 08-suspense/lecture/src/workouts/Competitions.js
rename to 08-suspense/lecture/src/lib/Competitions.js
diff --git a/08-suspense/lecture/src/components/ManageScroll.js b/08-suspense/lecture/src/lib/ManageScroll.js
similarity index 100%
rename from 08-suspense/lecture/src/components/ManageScroll.js
rename to 08-suspense/lecture/src/lib/ManageScroll.js
diff --git a/08-suspense/lecture/src/cache.js b/08-suspense/lecture/src/lib/cache.js
similarity index 100%
rename from 08-suspense/lecture/src/cache.js
rename to 08-suspense/lecture/src/lib/cache.js
diff --git a/08-suspense/lecture/src/index.css b/08-suspense/lecture/src/lib/index.css
similarity index 100%
rename from 08-suspense/lecture/src/index.css
rename to 08-suspense/lecture/src/lib/index.css
diff --git a/08-suspense/lecture/src/workouts/utils.js b/08-suspense/lecture/src/lib/utils.js
similarity index 79%
rename from 08-suspense/lecture/src/workouts/utils.js
rename to 08-suspense/lecture/src/lib/utils.js
index b8bf700..ed40711 100644
--- a/08-suspense/lecture/src/workouts/utils.js
+++ b/08-suspense/lecture/src/lib/utils.js
@@ -1,7 +1,15 @@
 import { createResource } from "simple-cache-provider";
 ////////////////////////////////////////////////////////////
 
-let qnetworks = ["fast", "slow", "slow", "fast", "slow", "fast", "nextIsSlow"];
+let qnetworks = [
+  "fast",
+  "slow",
+  "slow",
+  "fast",
+  "slow",
+  "fast",
+  "nextIsSlow"
+];
 let search = window.location.search.substr(1);
 
 let network = qnetworks[search] || "fast";
@@ -10,7 +18,8 @@ export { network };
 
 ////////////////////////////////////////////////////////////
 
-const sleep = (ms = 1000) => new Promise(res => setTimeout(res, ms));
+const sleep = (ms = 1000) =>
+  new Promise(res => setTimeout(res, ms));
 
 let token = null;
 
@@ -42,9 +51,17 @@ const fakeWorkouts = [
     completed: true
   },
   { name: "Cardio", id: "cardio", completed: true },
-  { name: "Lower Body", id: "lower", completed: false },
+  {
+    name: "Lower Body",
+    id: "lower",
+    completed: false
+  },
   { name: "Core", id: "core", completed: false },
-  { name: "Upper Body", id: "upper-body", completed: false }
+  {
+    name: "Upper Body",
+    id: "upper-body",
+    completed: false
+  }
 ];
 
 const fakeExercises = {
@@ -63,7 +80,12 @@ const fakeExercises = {
     "jab punch sprawl",
     "burpees"
   ],
-  lower: ["lunges", "jump squats", "side-kicks", "hip raises"],
+  lower: [
+    "lunges",
+    "jump squats",
+    "side-kicks",
+    "hip raises"
+  ],
   core: ["crunches"],
   "upper-body": ["curls"]
 };
@@ -99,6 +121,8 @@ export const fetchExercises = id =>
     console.logTakeoff(`fetchExercises ${id}`);
     await sleep(2000);
     console.logLanding(`fetchExercises ${id}`);
+    console.log("-------");
+    console.log(fakeExercises[id]);
     res(fakeExercises[id]);
   });
 
@@ -107,7 +131,11 @@ export const fetchNextWorkout = id =>
     console.logTakeoff(`fetchNext ${id}`);
     await sleep(3000);
     console.logLanding(`fetchNext ${id}`);
-    res(fakeWorkouts.find(workout => workout.id === fakeNextWorkouts[id]));
+    res(
+      fakeWorkouts.find(
+        workout => workout.id === fakeNextWorkouts[id]
+      )
+    );
   });
 
 ////////////////////////////////////////////////////////////
@@ -148,14 +176,22 @@ export const NextWorkoutResource = createResource(
       console.logTakeoff(`readRelated ${id}`);
       await sleep(networks[network].next);
       console.logLanding(`readRelated ${id}`);
-      res(fakeWorkouts.find(workout => workout.id === fakeNextWorkouts[id]));
+      res(
+        fakeWorkouts.find(
+          workout =>
+            workout.id === fakeNextWorkouts[id]
+        )
+      );
     })
 );
 
 ////////////////////////////////////////////////////////
 // Contacts
 const API = `https://contacts.now.sh`;
-const fetchContacts = async (url, opts = { headers: {} }) => {
+const fetchContacts = async (
+  url,
+  opts = { headers: {} }
+) => {
   return fetch(`${API}${url}`, {
     ...opts,
     headers: { authorization: token, ...opts.headers }
@@ -168,7 +204,9 @@ const fetchContacts = async (url, opts = { headers: {} }) => {
   });
 };
 
-export const readContacts = createResource(() => fetchContacts("/contacts"));
+export const readContacts = createResource(() =>
+  fetchContacts("/contacts")
+);
 
 export const readContact = createResource(id =>
   fetchContacts(`/contacts/${id}`)
@@ -186,9 +224,15 @@ export const createContact = contact =>
 ////////////////////////////////////////////////////////
 // logging stuff
 console.logTakeoff = str => {
-  console.log(`%c🛫 ${str}`, "font-size: 20px; color: hsl(10, 50%, 50%)");
+  console.log(
+    `%c🛫 ${str}`,
+    "font-size: 20px; color: hsl(10, 50%, 50%)"
+  );
 };
 
 console.logLanding = str => {
-  console.log(`%c🛬 ${str}`, "font-size: 20px; color: hsl(170, 50%, 50%)");
+  console.log(
+    `%c🛬 ${str}`,
+    "font-size: 20px; color: hsl(170, 50%, 50%)"
+  );
 };
diff --git a/08-suspense/lecture/src/workouts/App.js b/08-suspense/lecture/src/workouts/App.js
deleted file mode 100644
index 81a7b54..0000000
--- a/08-suspense/lecture/src/workouts/App.js
+++ /dev/null
@@ -1,283 +0,0 @@
-import { createElement } from "glamor/react"; // eslint-disable-line
-/* @jsx createElement */
-import "./index.css";
-import Spinner from "react-svg-spinner";
-import ManageScroll from "../components/ManageScroll";
-import React, { Placeholder, lazy } from "react";
-import { Router, Link, redirectTo } from "@reach/router";
-import Component from "@reach/component-component";
-import {
-  fetchWorkouts,
-  fetchWorkout,
-  fetchExercises,
-  fetchNextWorkout,
-  WorkoutsResource,
-  WorkoutResource,
-  ExercisesResource,
-  NextWorkoutResource,
-  network
-} from "./utils";
-import { cache } from "../cache";
-
-const Competitions = React.lazy(() =>
-  import("./Competitions")
-);
-
-// Chantastic said this is okay to do.
-console.warn = () => {};
-
-let qpatience = [5000, 5000, 1, 1, 2000, 2000, 2000];
-let search = window.location.search.substr(1);
-let patience = qpatience[search] || 10000;
-
-const link = {
-  display: "inline-block",
-  width: "200px",
-  height: "200px",
-  lineHeight: "200px",
-  background: "#fff",
-  textAlign: "center",
-  margin: "20px",
-  ":hover": {
-    background: "#ddd"
-  },
-  position: "relative"
-};
-
-const LoadingLink = ({ children, ...props }) => (
-  <Component initialState={{ isLoading: false }}>
-    {({ state, setState }) => (
-      <Link
-        {...props}
-        onClick={() => {
-          setState({ isLoading: true });
-        }}
-      >
-        {children}
-        <div
-          css={{
-            transition: "opacity 200ms ease",
-            transitionDelay: "500ms",
-            position: "absolute",
-            left: 0,
-            top: 25,
-            right: 0,
-            bottom: 0,
-            opacity: state.isLoading ? "1" : "0"
-          }}
-        >
-          <LoadingSpinner />
-        </div>
-      </Link>
-    )}
-  </Component>
-);
-
-const Home = () => (
-  <div>
-    <h1 css={{ textAlign: "center" }}>Workout App!</h1>
-    <div
-      css={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <Link to="/workouts" css={link}>
-        Workouts
-      </Link>
-      <Link to="/competitions" css={link}>
-        Competitions
-      </Link>
-    </div>
-  </div>
-);
-
-const Workouts = () => {
-  const workouts = WorkoutsResource.read(cache, 10);
-  return (
-    <div>
-      <Link to="..">Home</Link>
-      <h1>Workouts</h1>
-      {workouts.map(workout => (
-        <Link key={workout.id} to={workout.id} css={link}>
-          {workout.name}
-        </Link>
-      ))}
-    </div>
-  );
-};
-
-const Exercises = ({ workoutId }) => {
-  const exercises = ExercisesResource.read(
-    cache,
-    workoutId
-  );
-  return (
-    <ul>
-      {exercises.map((exercise, i) => (
-        <li key={i}>{exercise}</li>
-      ))}
-    </ul>
-  );
-};
-
-class Workout extends React.Component {
-  state = {
-    workout: null,
-    exercises: null,
-    nextWorkout: null
-  };
-
-  componentDidMount() {
-    this.fetch();
-  }
-
-  fetch() {
-    const { workoutId } = this.props;
-    fetchWorkout(workoutId).then(workout => {
-      this.setState({ workout });
-    });
-    fetchExercises(workoutId).then(exercises => {
-      this.setState({ exercises });
-    });
-    fetchNextWorkout(workoutId).then(nextWorkout => {
-      console.log(nextWorkout);
-      this.setState({ nextWorkout });
-    });
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.workoutId !== this.props.workoutId) {
-      this.setState({
-        exercises: null,
-        workout: null,
-        nextWorkout: null
-      });
-      this.fetch();
-    }
-  }
-
-  render() {
-    const { workoutId } = this.props;
-    const { workout, exercises, nextWorkout } = this.state;
-
-    WorkoutResource.read(cache, workoutId);
-
-    return workout ? (
-      <div>
-        <Link to="../..">Home</Link> /{" "}
-        <Link to="..">Workouts</Link>
-        <h1>{workout.name}</h1>
-        {exercises ? (
-          <Exercises exercises={exercises} />
-        ) : (
-          <Spinner />
-        )}
-        {workout.completed &&
-          (nextWorkout ? (
-            <NextWorkout nextWorkout={nextWorkout} />
-          ) : (
-            <h2>
-              Up Next! <Spinner size="0.75em" />
-            </h2>
-          ))}
-      </div>
-    ) : (
-      <Spinner size="100" />
-    );
-  }
-}
-
-// class Workout extends React.Component {
-//   render() {
-//     const { workoutId } = this.props;
-
-//     const workout = WorkoutResource.read(cache, workoutId);
-
-//     return (
-//       <div>
-//         <Link to="../..">Home</Link> /{" "}
-//         <Link to="..">Workouts</Link>
-//         <h1>{workout.name}</h1>
-//         <Placeholder
-//           delayMs={patience}
-//           fallback={<Spinner size="150" />}
-//         >
-//           <Exercises workoutId={workoutId} />
-//         </Placeholder>
-//         {workout.completed && (
-//           <Placeholder
-//             delayMs={patience}
-//             fallback={
-//               <h2>
-//                 Up Next! <Spinner size="0.75em" />
-//               </h2>
-//             }
-//           >
-//             <NextWorkout workoutId={workoutId} />
-//           </Placeholder>
-//         )}
-//       </div>
-//     );
-//   }
-// }
-
-const NextWorkout = ({ workoutId }) => {
-  const nextWorkout = NextWorkoutResource.read(
-    cache,
-    workoutId
-  );
-  return (
-    <div>
-      <h2>
-        Up Next!{" "}
-        <Link to={`../${nextWorkout.id}`}>
-          {nextWorkout.name}
-        </Link>
-      </h2>
-    </div>
-  );
-};
-
-const LoadingSpinner = () => (
-  <div css={{ textAlign: "center", padding: 20 }}>
-    <Spinner size="100" />
-  </div>
-);
-
-const Network = () => (
-  <div
-    style={{
-      fontWeight: "bold",
-      fontSize: 30,
-      position: "fixed",
-      bottom: 20,
-      right: 20
-    }}
-  >
-    Network: {network}
-  </div>
-);
-
-const App = () => {
-  return (
-    <React.Fragment>
-      <Placeholder
-        delayMs={patience}
-        fallback={<Spinner size="100" />}
-      >
-        <ManageScroll />
-        <Router style={{ padding: 20 }}>
-          <Home path="/" />
-          <Workouts path="workouts" />
-          <Workout path="workouts/:workoutId" />
-          <Competitions path="competitions" />
-        </Router>
-      </Placeholder>
-      <Network />
-    </React.Fragment>
-  );
-};
-
-export default App;
diff --git a/08-suspense/lecture/src/workouts/Img.js b/08-suspense/lecture/src/workouts/Img.js
deleted file mode 100644
index 91e53d6..0000000
--- a/08-suspense/lecture/src/workouts/Img.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/* eslint-disable jsx-a11y/alt-text */
-import React from "react";
-import { createResource } from "simple-cache-provider";
-import withCache from "./withCache";
-
-const ImageResource = createResource(src => {
-  const image = new Image();
-  return new Promise(resolve => {
-    image.onload = () => resolve(src);
-    image.src = src;
-  });
-});
-
-function Img({ cache, src, ...props }) {
-  return <img src={ImageResource.read(cache, src)} {...props} />;
-}
-
-export const preload = ImageResource.preload;
-
-export default withCache(Img);
diff --git a/08-suspense/lecture/src/workouts/withCache.js b/08-suspense/lecture/src/workouts/withCache.js
deleted file mode 100644
index 8edb126..0000000
--- a/08-suspense/lecture/src/workouts/withCache.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { SimpleCache } from "simple-cache-provider";
-
-export default Comp => props => (
-  <SimpleCache.Consumer>
-    {cache => <Comp {...props} cache={cache} />}
-  </SimpleCache.Consumer>
-);