Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loading screen #770

Merged
merged 18 commits into from May 15, 2019

Conversation

Projects
None yet
6 participants
@bpierre
Copy link
Member

commented May 8, 2019

Loading screen

load-apps


馃摵 video

Summary

Add a new loading screen to Aragon. Four loading states are displayed:

  • Loading organization.
  • Loading apps.
  • Loading the external app (if any).
  • Ready (fade out transition).

How to test

  1. Use the branch corresponding to this pull request:
git fetch
git checkout app-loader
  1. Install the dependencies and start the server:
npm install
npm run start:rinkeby # or npm run start:mainnet
  1. Open http://localhost:3000/ in your browser and load an organization (rinkeby).

Notes

AppLoader

The AppLoader component is made in a way that it will allow other sequences of loading states to be defined in the future. The general idea is to consider this commit as a first step:

  • First we add the AppLoader component, which doesn鈥檛 directly load the apps but takes them as children, and only handles the loading screen. This is what this commit does.
  • Then, we start to move some app state into contexts / hooks, to make it easier to access it.
  • Finally, AppLoader could be made fully responsible of loading the current app.

AnimatedLogo

AnimatedLogo is animated using CSS animations until we upgrade the app to react-spring@9 and its updated API.

bpierre added some commits May 8, 2019

Home: remove the transition
To be replaced by the loading screen.
Add an app loader
Four different loading states are displayed:
  - Loading organization.
  - Loading apps.
  - Loading the external app (if any).
  - Ready (fade out transition).

The AppLoader component is made in a way that it will allow other
sequences of loading states to be defined in the future. The general
idea is to consider this commit as a first step:

  - First we add the AppLoader component, which doesn鈥檛 directly load
    the apps but takes them as children, and only handles the loading
    screen. This is what this commit does.

  - Then, we start to move some app state into contexts / hooks, to make
    it easier to access it.

  - Finally, AppLoader could be made fully responsible of loading the
    current app.

Note: AnimatedLogo is animated using CSS animations until the app
upgrades react-spring to version 9 and its updated API.
Make the app transparent until ready
Prevent some flickering to happen when the app is in the browser cache.
@dizzypaty
Copy link
Member

left a comment

Amazing work! 馃敟馃敟馃敟

@bpierre bpierre changed the title App loader Loading screen May 8, 2019

@owisixseven

This comment has been minimized.

Copy link

commented May 8, 2019

This is amazing, really :)

@luisivan

This comment has been minimized.

Copy link
Member

commented May 8, 2019

BA-BOOM

@sohkai

sohkai approved these changes May 9, 2019

Copy link
Member

left a comment

馃挮 馃帀 Awesome work @bpierre @dizzypaty!

Main comment is whether we should delay the internal apps from displaying until all the apps are fetched.

Show resolved Hide resolved src/components/App/AppIFrame.js
Show resolved Hide resolved src/components/App/AppIFrame.js
Show resolved Hide resolved src/components/App/AppLoader.js Outdated
Show resolved Hide resolved src/components/App/AppLoader.js
Show resolved Hide resolved src/components/Home/Home.js

@luisivan luisivan referenced this pull request May 9, 2019

Closed

Loading indicator for client #27

1 of 1 task complete
Show resolved Hide resolved src/Wrapper.js Outdated
@AquiGorka
Copy link
Contributor

left a comment

馃帀 great work! 馃槃
Left a couple of suggestions.

bpierre added some commits May 13, 2019

@sohkai sohkai referenced this pull request May 13, 2019

Closed

0.7.2 #102

17 of 20 tasks complete

bpierre added some commits May 13, 2019

@bpierre bpierre requested a review from sohkai May 14, 2019

@bpierre bpierre merged commit b20501e into master May 15, 2019

7 checks passed

License Compliance All checks passed.
Details
build build
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
install install
Details
license/cla Contributor License Agreement is signed.
Details
lint lint
Details

@bpierre bpierre deleted the app-loader branch May 15, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.