Code Monkey home page Code Monkey logo

react-suspense-meetup-demo's Introduction

React-Suspend with data-loading

There are these different modes how the page data are loaded:

screenshot.png

On the right side, there is a Cache-loading inspector "hitchcock" by @pombo, based on the work of Jared Palmer

Purpose: React Suspense - demo

List the (feature) branches of a GitHub repository with its last commit's

  • build status-es
  • linked PR
  • commit message and author
  • linked deployment

Getting started

After invoking this in a shell

git clone https://github.com/lowsky/react-suspense-meetup-demo
cd react-suspense-meetup-demo

yarn

then set up the github-token (see below: Setup GitHub Token )

before starting local dev mode via:

yarn dev

This runs Next.js in dev-mode

Now, you can open the home http://localhost:3000 in your browser.

Have fun!

setupGithubToken

You need to create your own github-token (see https://github.com/settings/tokens/) and store it locally in .env file

# create an .env file with this content ...
GITHUB_TOKEN=XXX

# ... and replace the XXX with your API key
# typically something like
# GITHUB_TOKEN=ghp_....

Stack

License

Licensed under the Apache License 2.0, Copyright Šī¸ 2023 Robert Hostlowsky. See LICENSE for more information.

react-suspense-meetup-demo's People

Contributors

lowsky avatar renovate[bot] avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

react-suspense-meetup-demo's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm
package.json
  • @chakra-ui/next-js 2.2.0
  • @chakra-ui/react 2.8.2
  • @emotion/react 11.11.4
  • @emotion/styled 11.11.5
  • @mdx-js/loader 3.0.1
  • @mdx-js/react 3.0.1
  • @next/mdx 14.2.3
  • @octokit/rest 20.1.1
  • framer-motion 11.2.6
  • hitchcock 0.5.0
  • next 14.2.3
  • nextjs-toploader 1.6.12
  • @chakra-ui/icons 2.1.1
  • @chakra-ui/system 2.6.2
  • @fortawesome/fontawesome-svg-core 6.5.2
  • @fortawesome/free-brands-svg-icons 6.5.2
  • @fortawesome/free-solid-svg-icons 6.5.2
  • @fortawesome/react-fontawesome 0.2.1
  • @octokit/types 13.5.0
  • @types/node 20.12.12
  • @types/react 18.3.2
  • @types/react-dom 18.3.0
  • csstype 3.1.3
  • eslint 8.57.0
  • eslint-config-next 14.2.3
  • eslint-config-prettier 9.1.0
  • eslint-plugin-prettier 5.1.3
  • prettier 3.2.5
  • react ^18.3.0-next
  • react-dom ^18.3.0-next
  • typescript 5.4.5
  • yarn 4.2.2
nvm
.nvmrc
  • node 20.13.1

  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤ī¸ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.