pkellner

const svccUiMachine = Machine({
  id: 'svccUiMachine1',
  context: {
    currentCodeCampYear: '2019',
    codeCampYears: [
      '2005',
      '2006',
      '2007',
      '2008',
      '2009',

pkellner

function Demo() {
  const fetcher = (url) => fetch(url).then((r) => r.json());
  const { data } = useSwr(
    `https://jsonplaceholder.typicode.com/todos`,
    fetcher,
    { suspense: false }
  );

  if (!data) return <div>Loading... (pre-Suspense)</div>;

pkellner

function Demo() {
  function ProcessAndRender() {
    const fetcher = (url) => fetch(url).then((r) => r.json());
    const { data } = useSwr(
      `https://jsonplaceholder.typicode.com/todos`,
      fetcher,
      { suspense: true }
    );
    return (
      <div className="container grid">

pkellner

// Author: Peter Kellner, https://peterkellner.net

import React from 'react';

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  updateHasErrorsToFalse = () => {
    this.setState(() => ({
      hasError: false,
    }));

pkellner

import { fetchCities } from "../data/cities";

export function fetchCityListData(displayCount) {
  const cityPromise = fetchCities(displayCount);
  return {
    cities: wrapPromise(cityPromise),
  };
}

function wrapPromise(promise) {

pkellner

import "./App.css";
import { useState, useDeferredValue, memo, useEffect } from "react";
import { fetchCities } from "./data/cities";
const displayCount = 1000;

// code similar to example by React Team: https://github.com/reactwg/react-18/discussions/129#discussioncomment-2439125

const ListItem = ({ id, name }) => {
  let now = performance.now();
  while (performance.now() - now < 5) {

pkellner

import "./App.css";
import { useState, useDeferredValue, memo, useEffect } from "react";
import { fetchCities } from "./data/cities";
const displayCount = 1000;

// code similar to example by React Team: https://github.com/reactwg/react-18/discussions/129#discussioncomment-2439125

const ListItem = ({ id, name }) => {
  let now = performance.now();
  while (performance.now() - now < 5) {

pkellner

import {DocumentNode} from "@apollo/client";
import {print} from "graphql/language/printer";

export async function getDataFromGql(gqlData: DocumentNode, variables: any = undefined) {

    const data = await fetch("https://graphql.svcc.mobi/graphql", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },

pkellner

 import React from "react";
import SpeakersHeader from "@/app/presenter/[year]/SpeakersHeader";
import SpeakerContent from "@/app/presenter/[year]/[presenterSlug]/SpeakerContent";

import { getDataFromGql } from "@/lib/getDataFromGql";
import { initializeApollo } from "@/lib/apolloClient";
import { speakerQuerySp1, speakerSlugsQuery } from "@/gql/speakers/speakers";
import { Speaker, SpeakerSlug } from "@/app/common/CodeCampInterfaces";
import SpeakerHeader from "@/app/presenter/[year]/[presenterSlug]/SpeakerHeader";

pkellner

.large-description {
  color: red;
  font-size: 20px;
}

.description {
  color: blue;
  fo