Fix "you are offline" nag being stuck

Was trying to save one event listener in the previous implementation and rely on other redux state-changes to spark a GUI update, but turns out there are scenarios where nothing is updated and the "offline" nag is stuck on screen.

## Change
Do it properly using the event listeners. The nag should now update promptly.

ui/component/app/view.jsx

@@ -20,6 +20,7 @@ import usePrevious from 'effects/use-previous';
 import Nag from 'component/common/nag';
 import REWARDS from 'rewards';
 import usePersistedState from 'effects/use-persisted-state';
+import useConnectionStatus from 'effects/use-connection-status';
 import Spinner from 'component/spinner';
 import LANGUAGES from 'constants/languages';
 import YoutubeWelcome from 'web/component/youtubeReferralWelcome';
@@ -157,7 +158,7 @@ function App(props: Props) {
   const hasActiveChannelClaim = activeChannelId !== undefined;
   const isPersonalized = !IS_WEB || hasVerifiedEmail;
   const renderFiledrop = !isMobile && isAuthenticated;
-  const isOnline = navigator.onLine;
+  const connectionStatus = useConnectionStatus();
 
   let uri;
   try {
@@ -171,7 +172,7 @@ function App(props: Props) {
 
   function getStatusNag() {
     // Handle "offline" first. Everything else is meaningless if it's offline.
-    if (!isOnline) {
+    if (!connectionStatus.online) {
       return <Nag type="helpful" message={__('You are offline. Check your internet connection.')} />;
     }
 
@@ -491,7 +492,7 @@ function App(props: Props) {
     );
   }
 
-  if (isOnline && lbryTvApiStatus === STATUS_DOWN) {
+  if (connectionStatus.online && lbryTvApiStatus === STATUS_DOWN) {
     // TODO: Rename `SyncFatalError` since it has nothing to do with syncing.
     return (
       <React.Suspense fallback={null}>

ui/effects/use-connection-status.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default function useConnectionStatus() {
+  const [online, setOnline] = React.useState(window.navigator.onLine);
+
+  React.useEffect(() => {
+    function handleOnline(event) {
+      setOnline(true);
+    }
+
+    function handleOffline(event) {
+      setOnline(false);
+    }
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  return { online };
+}