Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nanxstats/shiny-fcp-loader
🚧 Shiny app skeleton with a loading screen that aims to minimize the time to first contentful paint (FCP)
https://github.com/nanxstats/shiny-fcp-loader
first-contentful-paint loading-screen shiny shiny-apps shinyjs
Last synced: 3 months ago
JSON representation
🚧 Shiny app skeleton with a loading screen that aims to minimize the time to first contentful paint (FCP)
- Host: GitHub
- URL: https://github.com/nanxstats/shiny-fcp-loader
- Owner: nanxstats
- License: mit
- Created: 2022-03-30T17:06:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-28T10:28:23.000Z (almost 2 years ago)
- Last Synced: 2024-01-27T23:07:13.441Z (10 months ago)
- Topics: first-contentful-paint, loading-screen, shiny, shiny-apps, shinyjs
- Language: R
- Homepage: https://nanx.shinyapps.io/shiny-fcp-loader/
- Size: 8.79 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-shiny-extensions - shiny-fcp-loader - Shiny app template with a loading screen that aims to minimize the time to First Contentful Paint (FCP). (UI Components / Loader)
- jimsghstars - nanxstats/shiny-fcp-loader - 🚧 Shiny app skeleton with a loading screen that aims to minimize the time to first contentful paint (FCP) (R)
README
# shiny-fcp-loader
Shiny app skeleton with a loading screen that aims to minimize the time
to [first contentful paint (FCP)](https://web.dev/fcp/).Demo:
Blog post:
## Problem
For larger Shiny apps, users could wait a long time with a blank screen before seeing the rendered app content in the web browser, possibly due to:
- Loading a considerable number of render-blocking CSS/JS dependencies.
- Initializing the app state with some intensive computation.
- Connecting to servers with bandwidth and response time limitations.## Solution
This Shiny app skeleton solves these problems on the app code level by:
- Implement a loading screen (loader); hide it after the main UI resources are loaded, and the state initialization is finished.
- Prioritizing loading the loader code so it can render before the main UI assets.
- Loading the main UI assets later separately without blocking the rendering of the loader.## Thanks
- The general structure of the loading screen code is from [scartwright91/loading-dashboard](https://github.com/scartwright91/loading-dashboard), by using the single-element CSS spinner from Luke Haas and shinyjs from Dean Attali.
- The loader code is packed as HTML dependency following the guidelines in the [handle HTML dependencies with htmltools](https://unleash-shiny.rinterface.com/htmltools-dependencies.html) chapter of the "Outstanding User Interfaces with Shiny" book by David Granjon.