How to use the simple-cache-provider.createCache function in simple-cache-provider

WAVES: '#e6afc7',
  SOTTSASS: '#e6afc7',
  CIRCLES: '#ff7f7f'
}

// We are using suspense here to suspend rendering while the design gets resolved, in other words, suspend rendering while the designs are being computed.
// Synchronously rendering all the designs is computationally heavy because it involves a lot of computational overhead, which includes applying operations such as translation, rotation and rendering the svg path
// This solution is still far from perfect but atleast it doesn't degrade the UX by flashing all the computed design at once on each refresh

const DEFAULT_DELAY = 1500

const SLEEP_TIMEOUT = 1000

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const cache = createCache()

const createDesignResource = createResource(
  () => sleep(SLEEP_TIMEOUT).then(() => import('./designs').then(mod => mod)),
  t => t
)
const createFractalResource = createResource(
  () =>
    sleep(SLEEP_TIMEOUT).then(() =>
      import('../../../designs-core/src').then(mod => mod)
    ),
  t => t
)

const getDesignComponent = designName => props => {
  const designs = createDesignResource.read(cache, props)
  const Design = designs[designName]

WAVES: '#e6afc7',
  SOTTSASS: '#e6afc7',
  CIRCLES: '#ff7f7f'
}

// We are using suspense here to suspend rendering while the design gets resolved, in other words, suspend rendering while the designs are being computed.
// Synchronously rendering all the designs is computationally heavy because it involves a lot of computational overhead, which includes applying operations such as translation, rotation and rendering the svg path
// This solution is still far from perfect but atleast it doesn't degrade the UX by flashing all the computed design at once on each refresh

const DEFAULT_DELAY = 1500

const SLEEP_TIMEOUT = 1000

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const cache = createCache()

const createDesignResource = createResource(
  () => sleep(SLEEP_TIMEOUT).then(() => import('./designs').then(mod => mod)),
  t => t
)
const createFractalResource = createResource(
  () =>
    sleep(SLEEP_TIMEOUT).then(() =>
      import('../../designs-core/src').then(mod => mod)
    ),
  t => t
)

const getDesignComponent = designName => props => {
  const designs = createDesignResource.read(cache, props)
  const Design = designs[designName]

href,
      onerror,
      onload,
      media
    });
    // $FlowFixMe
    ref.parentNode.insertBefore(link, before ? ref : ref.nextSibling);
  });
}

const Resource = createResource(
  load,
  ({ href, media = "all" }) => `${href}.${media}`
);

const cache = createCache();

export default function Stylesheet(props: Sheet) {
  if (isBrowser) Resource.read(cache, props);
  return ;
}

import React, { Component, Timeout } from 'react'
import { createCache, createResource } from 'simple-cache-provider'

const compatible = React.version.includes('16.4')

if (!compatible) {
  console.warn(
    `🚨 The running version of react is not compatible with the suspense feature → Upgrade react or downgrade drum-roll.`,
  )
}

const cache = createCache()

export const createFetcher = resolver => {
  const resource = createResource(resolver)
  return key => () => resource(cache, key)
}

const Renderer = ({ fetcher, children, didExpire, error }) =>
  error
    ? children(null, true)
    : didExpire ? children(null) : children(fetcher())

export class Fetcher extends Component {
  state = { error: false }

  componentDidCatch(e) {
    this.setState({ error: true })

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import { createCache, createResource } from 'simple-cache-provider';
import axios from 'axios';
import './App.css';

const cache = createCache(Symbol('CacheDemo'));

function createFetcher(fetch) {
  const res = createResource(fetch);
  return (...args) => res(cache, ...args);
}

function Placeholder(props) {
  return (
    
      {loading => loading ? props.placeholder : props.children}
    
  )
}

const fetchPlanetPage = createFetcher(
  () => import('./PlanetPage'),

import * as R from 'ramda'
import React, { Timeout } from 'react'
import ReactDOM from 'react-dom'
import { createCache, createResource } from 'simple-cache-provider'

const cache = createCache(() => {})

export const createFetcher = resolver => {
  const resource = createResource(resolver)
  return {
    read: key => resource.read(cache, key),
  }
}

export const Placeholder = props => (
  
    {didExpire => (didExpire ? props.fallback : props.children)}
  
)

export class Component extends React.Component {
  deferSetState(updater, callback) {

function initCache() {
    cache = createCache(initCache);
}
initCache();

import React from 'react'
import PropTypes from 'prop-types'
import { createResource, createCache } from 'simple-cache-provider'
import { withSharedState } from 'statext'

const cache = createCache()
const { read: readText } = createResource(
  ([text, ms = 0]) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(text)
      }, ms)
    })
  },
  ([text]) => text
)

function AsyncLoader({ text = 'Hello async rendering', ms = 2500, children }) {
  return children(readText(cache, [text, ms]))
}

class AsyncState extends React.Component {

import React from 'react';
import axios from 'axios';
import { createCache, createResource } from 'simple-cache-provider';

const cache = createCache(Symbol('CacheDemo'));

function createFetcher(fetch) {
  const res = createResource(fetch);
  return (...args) => res(cache, ...args);
}

function Placeholder(props) {
    return (
      
        {loading => loading ? props.placeholder : props.children}
      
    )
  }

const fetchPlanet = createFetcher(
    (id) => axios.get(`https://swapi.co/api/planets/${id}/`),