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.