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

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

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

import "./index.css";

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

import Component from "../../components/Component";

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

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

class NewsById extends Component {
  static getDerivedStateFromProps = (nextProps, prevState) => ({
    nws: newsByIdFetcher(nextProps.cache, nextProps.id)
  });

  state = {
    nws: {}
  };

  render() {
    return (
      <section></section>

import React, {Timeout} from 'react';
import { createResource } from 'simple-cache-provider';
import { withCache } from './components/withCache'; 
import './App.css';

const sleep = ms => new Promise(r => setTimeout(() => r(), ms));

const readShows = createResource(async function fetchNews() {
  await sleep(3000);
  const res = await fetch(`https://api.tvmaze.com/search/shows?q=suits`);
  return await res.json();
});

const Movies = withCache( (props) => {

  const result = readShows(props.cache);

  return (
    
      {result &&
          result.length &&
            result.map(item => (
              <div>
                <div></div></div>

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

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