Add initialization status to push notification hook. Can be used to better control render strategy in cmpnts utilizing it. (#284)

web/component/browserNotificationBanner/view.jsx

@@ -8,10 +8,19 @@ import Button from 'component/button';
 import usePersistedState from 'effects/use-persisted-state';
 
 export const BrowserNotificationBanner = () => {
-  const { pushSupported, pushEnabled, pushPermission, pushToggle, pushErrorModal } = useBrowserNotifications();
+  const {
+    pushInitialized,
+    pushSupported,
+    pushEnabled,
+    pushPermission,
+    pushToggle,
+    pushErrorModal,
+  } = useBrowserNotifications();
   const [hasAcknowledgedPush, setHasAcknowledgedPush] = usePersistedState('push-nag', false);
 
-  if (!pushSupported || pushEnabled || pushPermission === 'denied' || hasAcknowledgedPush) return null;
+  if (!pushInitialized || !pushSupported || pushEnabled || pushPermission === 'denied' || hasAcknowledgedPush) {
+    return null;
+  }
 
   const handleClose = () => setHasAcknowledgedPush(true);
 

web/component/browserNotificationSettings/use-browser-notifications.js

@@ -13,13 +13,17 @@ export default () => {
   const [pushEnabled, setPushEnabled] = useState(false);
   const [pushSupported, setPushSupported] = useState(true);
   const [encounteredError, setEncounteredError] = useState(false);
+  const [pushInitialized, setPushInitialized] = useState(false);
 
   const [user] = useState(selectUser(store.getState()));
 
   useEffect(() => {
     setPushSupported(pushNotifications.supported);
     if (pushNotifications.supported) {
-      pushNotifications.subscribed(user.id).then((isSubscribed: boolean) => setSubscribed(isSubscribed));
+      pushNotifications.subscribed(user.id).then((isSubscribed: boolean) => {
+        setSubscribed(isSubscribed);
+        setPushInitialized(true);
+      });
     }
   }, [user]);
 
@@ -59,6 +63,7 @@ export default () => {
   };
 
   return {
+    pushInitialized,
     pushSupported,
     pushEnabled,
     pushPermission,