How to use simple-cache-provider - 10 common examples

// 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]

  return 
}

const withPlaceholder = (
  delay,

/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import { createResource } from "simple-cache-provider";
import withCache from "./withCache";

function loadImage(src) {
  const image = new Image();
  return new Promise(resolve => {
    image.onload = () => resolve(src);
    image.src = src;
  });
}

const readImage = createResource(loadImage);

function Img({ cache, src, ...props }) {
  return <img src="{readImage(cache,">;
}

export const preload = readImage.preload;

export default withCache(Img);

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]

  return

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 })

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

import "./index.css";

import React from "react";
import { createResource as createFetcher } from "simple-cache-provider";

import Component from "../../components/Component";
import { Link } from '../../components/Router';

import withPlaceholderAndCache from "../../hocs";

const newsFetcher = createFetcher(async () => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
  return await res.json();
});

class News extends Component {
  static getDerivedStateFromProps = (nextProps, prevState) => ({
    news: newsFetcher(nextProps.cache)
  });

  state = {
    news: []
  };

  render() {
    const { news } = this.state;
    news.length = 99;

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