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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Fix app state clash on browser refresh #1496

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Commits on Oct 30, 2019

  1. Fix app state clash on browser refresh

    When you're working with an app and you refresh the browser, the app shows as loading, then the content loads, then you see an empty card, and then you see the content again. In order to solve this issue, let's dig into the three ways in which an app is loaded:
    
    A. On first load
       1. The app state reducer is called with a `null` state (you see an empty card)
       2. The store is initialized (you see an empty card)
       3. The app state reducer is called with a state loaded from the store (you see the actual content)
    
    B. Coming back from another application
       1. The app state reducer is called with the cached previous state (you see the old content)
       2. The app statee reducer is called with a state loaded from the store (you see the actual content)
    
    C. After refreshing the browser
       1. The app state reducer is called with a `null` state (you see an empty card)
       2. The app state reducer is called with the cached previous state (you see the old content)
       3. The store is initialized (you see an empty card)
       4. The app state reducer is called with a state loaded from the store (you see the actual content)
    
    The issue at hand is caused by step C.3, which shouldn't take place, since the store is already initialized. I believe C.3 to be a bug from AragonAPI, which @Schwartz10 already [reported](aragon/aragon.js#396).
    
    A downstream fix for this bug can only take place in the app state reducer, since it is called before the store. We need a way to detect that step C.3 is taking place and refrain from updating the state before it finishes loading, since the old state that we already have is more complete.
    
    But how to detect C.3 based solely on the state? Sure, you can detect that the store is being initialized, but how can you know that it's not loading for the first time? What I came up with was to store the previous state that the app state reducer received, and compare it to the current one. C.3 is the only case in which the previous state has elements that the current state doesn't.
    
    If C.3 is happening, don't update the state; just use the previous one. And as soon as the current state is at least as complete as the previous one, update it.
    e18r committed Oct 30, 2019
    Configuration menu
    Copy the full SHA
    25662b3 View commit details
    Browse the repository at this point in the history