do not render stats blocked if page isnt active yet

app/background/reducers/shieldsPanelReducer.ts

@@ -23,7 +23,7 @@ import { reloadTab } from '../api/tabsAPI'
 import * as shieldsPanelState from '../../state/shieldsPanelState'
 import { State, Tab } from '../../types/state/shieldsPannelState'
 import { Actions } from '../../types/actions/index'
-import { getTotalResourcesBlocked } from '../../helpers/shieldsUtils'
+import { getTotalResourcesBlocked, isShieldsActive } from '../../helpers/shieldsUtils'
 
 const updateShieldsIconBadgeText = (state: State) => {
   const tabId: number = shieldsPanelState.getActiveTabId(state)
@@ -199,7 +199,8 @@ export default function shieldsPanelReducer (state: State = { tabs: {}, windows:
         const currentTabId: number = shieldsPanelState.getActiveTabId(state)
         state = shieldsPanelState.updateResourceBlocked(
           state, tabId, action.details.blockType, action.details.subresource)
-        if (tabId === currentTabId) {
+        const shieldsActive: boolean = isShieldsActive(state, tabId)
+        if (tabId === currentTabId && shieldsActive) {
           updateShieldsIconBadgeText(state)
         }
         break

app/helpers/shieldsUtils.ts

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Tab } from '../types/state/shieldsPannelState'
+import { Tab, State } from '../types/state/shieldsPannelState'
 
 export const getTotalResourcesBlocked = (tabData: Partial<Tab>) => {
   if (!tabData) {
@@ -31,3 +31,10 @@ export const blockedResourcesSize = (blockedResources: number) => {
   }
   return blockedResources.toString()
 }
+
+export const isShieldsActive = (state: State, tabId: number): boolean => {
+  if (!state.tabs[tabId]) {
+    return false
+  }
+  return state.tabs[tabId].braveShields !== 'block'
+}