fixup! Fixed flickering whenever reload due to vpn card page change

components/brave_new_tab_ui/actions/brave_vpn_actions.ts

@@ -6,7 +6,7 @@
 import { createAction } from 'redux-act'
 import * as BraveVPN from '../api/braveVpn'
 
-export const initialize = createAction('initialize')
+export const initialize = createAction<BraveVPN.PurchasedState>('initialize')
 export const toggleConnection = createAction('toggleConnection')
 export const launchVPNPanel = createAction('launchVPNPanel')
 export const openVPNAccountPage = createAction('openVPNAccountPage')

components/brave_new_tab_ui/api/initialData.ts

@@ -9,6 +9,8 @@ import * as privateTabDataAPI from './privateTabData'
 import * as wallpaper from './wallpaper'
 import * as newTabAdsDataAPI from './newTabAdsData'
 import getNTPBrowserAPI from './background'
+import getVPNServiceHandler, * as BraveVPN from '../api/braveVpn'
+import { loadTimeData } from '$web-common/loadTimeData'
 
 export type InitialData = {
   preferences: NewTab.Preferences
@@ -20,6 +22,7 @@ export type InitialData = {
   braveRewardsSupported: boolean
   braveTalkSupported: boolean
   searchPromotionEnabled: boolean
+  purchasedState: BraveVPN.PurchasedState
 }
 
 export type PreInitialRewardsData = {
@@ -56,7 +59,8 @@ export async function getInitialData (): Promise<InitialData> {
       braveTalkSupported,
       searchPromotionEnabled,
       braveBackgrounds,
-      customImageBackgrounds
+      customImageBackgrounds,
+      purchasedState
     ] = await Promise.all([
       preferencesAPI.getPreferences(),
       statsAPI.getStats(),
@@ -83,6 +87,15 @@ export async function getInitialData (): Promise<InitialData> {
       }),
       getNTPBrowserAPI().pageHandler.getCustomImageBackgrounds().then(({ backgrounds }) => {
         return backgrounds.map(background => ({ type: 'image', wallpaperImageUrl: background.url.url }))
+      }),
+      new Promise((resolve) => {
+        if (loadTimeData.getBoolean('vpnWidgetSupported')) {
+          getVPNServiceHandler().getPurchasedState().then(({state}) => {
+            resolve(state.state)
+          })
+        } else {
+          resolve(BraveVPN.PurchasedState.NOT_PURCHASED)
+        }
       })
     ])
     console.timeStamp('Got all initial data.')
@@ -95,7 +108,8 @@ export async function getInitialData (): Promise<InitialData> {
       customImageBackgrounds,
       braveRewardsSupported,
       braveTalkSupported,
-      searchPromotionEnabled
+      searchPromotionEnabled,
+      purchasedState
     } as InitialData
   } catch (e) {
     console.error(e)

components/brave_new_tab_ui/apiEventsToStore.ts

@@ -12,6 +12,7 @@ import * as newTabAdsDataAPI from './api/newTabAdsData'
 import getNTPBrowserAPI, { Background, CustomBackground } from './api/background'
 import { getInitialData, getRewardsInitialData, getRewardsPreInitialData } from './api/initialData'
 import * as backgroundData from './data/backgrounds'
+import { loadTimeData } from '$web-common/loadTimeData'
 
 async function updatePreferences (prefData: NewTab.Preferences) {
   getActions().preferencesUpdated(prefData)
@@ -71,6 +72,9 @@ export function wireApiEventsToStore () {
     getNTPBrowserAPI().addBackgroundUpdatedListener(onBackgroundUpdated)
     getNTPBrowserAPI().addCustomImageBackgroundsUpdatedListener(onCustomImageBackgroundsUpdated)
     getNTPBrowserAPI().addSearchPromotionDisabledListener(() => getActions().searchPromotionDisabled())
+    if (loadTimeData.getBoolean('vpnWidgetSupported')) {
+      getActions().braveVPN.initialize(initialData.purchasedState)
+    }
   })
   .catch(e => {
     console.error('New Tab Page fatal error:', e)

components/brave_new_tab_ui/async/brave_vpn.ts

@@ -3,79 +3,76 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import getVPNServiceHandler, {
-  ServiceObserverReceiver,
-  ConnectionState,
-  PurchasedState,
-  Region
-} from '../api/braveVpn'
+import getVPNServiceHandler, { ConnectionState, PurchasedState, Region, ServiceObserverReceiver } from '../api/braveVpn'
 import * as Actions from '../actions/brave_vpn_actions'
-import store from '../store'
 import { ApplicationState } from '../reducers'
 import AsyncActionHandler from '../../common/AsyncActionHandler'
 import getNTPBrowserAPI from '../api/background'
-import { loadTimeData } from '$web-common/loadTimeData'
+import store from '../store'
 
-const handler = new AsyncActionHandler()
+const observer = {
+  onConnectionStateChanged: (state: ConnectionState) => {
+    store.dispatch(Actions.connectionStateChanged(state))
+  },
 
-if (loadTimeData.getBoolean('vpnWidgetSupported')) {
-  const observer = {
-    onConnectionStateChanged: (state: ConnectionState) => {
-      store.dispatch(Actions.connectionStateChanged(state))
-    },
+  onSelectedRegionChanged: (region: Region) => {
+    store.dispatch(Actions.selectedRegionChanged(region))
+  },
 
-    onSelectedRegionChanged: (region: Region) => {
-      store.dispatch(Actions.selectedRegionChanged(region))
-    },
+  onPurchasedStateChanged: (state: PurchasedState, description: string) => {
+    store.dispatch(Actions.purchasedStateChanged(state))
+  }
+}
 
-    onPurchasedStateChanged: (state: PurchasedState, description: string) => {
-      store.dispatch(Actions.purchasedStateChanged(state))
-    }
+const handler = new AsyncActionHandler()
+
+// Initialize with current purchased state.
+handler.on<PurchasedState>(Actions.initialize.getType(),
+  async (store, payload) => {
+    const serviceObserver = new ServiceObserverReceiver(observer)
+    getVPNServiceHandler().addObserver(
+      serviceObserver.$.bindNewPipeAndPassRemote())
+    getNTPBrowserAPI().pageHandler.refreshVPNState()
+    store.dispatch(Actions.purchasedStateChanged(payload))
   }
+)
 
-  const serviceObserver = new ServiceObserverReceiver(observer)
-  getVPNServiceHandler().addObserver(
-    serviceObserver.$.bindNewPipeAndPassRemote()
-  )
-  getNTPBrowserAPI().pageHandler.refreshVPNState()
+handler.on(Actions.launchVPNPanel.getType(), async (store) => {
+  getNTPBrowserAPI().pageHandler.launchVPNPanel()
+})
 
-  handler.on(Actions.launchVPNPanel.getType(), async (store) => {
-    getNTPBrowserAPI().pageHandler.launchVPNPanel()
-  })
+handler.on(Actions.openVPNAccountPage.getType(), async (store) => {
+  getNTPBrowserAPI().pageHandler.openVPNAccountPage()
+})
 
-  handler.on(Actions.openVPNAccountPage.getType(), async (store) => {
-    getNTPBrowserAPI().pageHandler.openVPNAccountPage()
-  })
+handler.on(Actions.toggleConnection.getType(), async (store) => {
+  const state = store.getState() as ApplicationState
+  const connectionState = state.braveVPN.connectionState
+  if (
+    connectionState === ConnectionState.CONNECTED ||
+    connectionState === ConnectionState.CONNECTING
+  ) {
+    getVPNServiceHandler().disconnect()
+  } else {
+    getVPNServiceHandler().connect()
+  }
+})
 
-  handler.on(Actions.toggleConnection.getType(), async (store) => {
-    const state = store.getState() as ApplicationState
-    const connectionState = state.braveVPN.connectionState
-    if (
-      connectionState === ConnectionState.CONNECTED ||
-      connectionState === ConnectionState.CONNECTING
-    ) {
-      getVPNServiceHandler().disconnect()
-    } else {
-      getVPNServiceHandler().connect()
+handler.on<PurchasedState>(
+  Actions.purchasedStateChanged.getType(),
+  async (store, purchasedState) => {
+    if (purchasedState !== PurchasedState.PURCHASED) {
+      return
     }
-  })
-
-  handler.on<PurchasedState>(
-    Actions.purchasedStateChanged.getType(),
-    async (store, purchasedState) => {
-      if (purchasedState !== PurchasedState.PURCHASED) {
-        return
-      }
 
-      const [{ state }, { currentRegion }] = await Promise.all([
-        getVPNServiceHandler().getConnectionState(),
-        getVPNServiceHandler().getSelectedRegion()
-      ])
+    const [{ state }, { currentRegion }] = await Promise.all([
+      getVPNServiceHandler().getConnectionState(),
+      getVPNServiceHandler().getSelectedRegion()
+    ])
 
-      store.dispatch(Actions.connectionStateChanged(state))
-      store.dispatch(Actions.selectedRegionChanged(currentRegion))
-    }
-  )
-}
+    store.dispatch(Actions.connectionStateChanged(state))
+    store.dispatch(Actions.selectedRegionChanged(currentRegion))
+  }
+)
 
 export default handler.middleware

components/brave_new_tab_ui/components/default/vpn/vpn_card.tsx

@@ -156,6 +156,7 @@ const RegionAction = styled.div`
 const RegionCountryLabel = styled.span`
   color: ${color.text.primary};
   font: ${font.large.semibold};
+  height: 24px;
 `
 
 const RegionChangeLink = styled.a`

components/brave_new_tab_ui/constants/new_tab_types.ts

@@ -7,6 +7,7 @@ import * as gridSitesActions from '../actions/grid_sites_actions'
 import * as rewardsActions from '../actions/rewards_actions'
 import * as stackWidgetActions from '../actions/stack_widget_actions'
 import * as todayActions from '../actions/today_actions'
+import * as braveVPNActions from '../actions/brave_vpn_actions'
 
 export const enum types {
   NEW_TAB_STATS_UPDATED = '@@newtab/NEW_TAB_STATS_UPDATED',
@@ -35,4 +36,5 @@ export type NewTabActions =
   typeof stackWidgetActions &
   {
     today: typeof todayActions
+    braveVPN: typeof braveVPNActions
   }

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -396,6 +396,7 @@ class NewTabPage extends React.Component<Props, State> {
   }
 
   braveVPNSupported = loadTimeData.getBoolean('vpnWidgetSupported')
+
   getCryptoContent () {
     if (this.props.newTabData.hideAllWidgets) {
       return null
@@ -410,17 +411,13 @@ class NewTabPage extends React.Component<Props, State> {
       showBraveVPN,
     } = this.props.newTabData
 
-    const {
-      initialized
-    } = this.props.braveVPNData
-
     const lookup: { [p: string]: { display: boolean, render: any } } = {
       'rewards': {
         display: braveRewardsSupported && showRewards,
         render: this.renderRewardsWidget.bind(this)
       },
       'braveVPN': {
-        display: this.braveVPNSupported && showBraveVPN && initialized,
+        display: this.braveVPNSupported && showBraveVPN,
         render: this.renderBraveVPNWidget
       },
       'braveTalk': {

components/brave_new_tab_ui/reducers/brave_vpn/index.ts

@@ -13,14 +13,12 @@ export type BraveVPNState = {
   purchasedState: BraveVPN.PurchasedState
   connectionState: BraveVPN.ConnectionState
   selectedRegion: BraveVPN.Region
-  initialized: boolean
 }
 
 const defaultState: BraveVPNState = {
   purchasedState: BraveVPN.PurchasedState.NOT_PURCHASED,
   connectionState: BraveVPN.ConnectionState.DISCONNECTED,
-  selectedRegion: new BraveVPN.Region(),
-  initialized: false
+  selectedRegion: new BraveVPN.Region()
 }
 
 const reducer = createReducer<BraveVPNState>({}, defaultState)
@@ -34,16 +32,14 @@ reducer.on(Actions.connectionStateChanged, (state, payload): BraveVPNState => {
 
 reducer.on(Actions.purchasedStateChanged, (state, payload): BraveVPNState => {
   // Don't update if it's in-progress to prevent unnecessary vpn card page chanage.
-  // Set initialized when final state is received once.
   const isLoading = payload === BraveVPN.PurchasedState.LOADING
 
   return {
     ...state,
     purchasedState:
       isLoading
         ? state.purchasedState
-        : payload,
-    initialized: isLoading ? state.initialized : true
+        : payload
   }
 })