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/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>
-);