Improve handling of bridge errors

ext/src/background/background.ts

@@ -5,7 +5,7 @@ import loadSender from "../lib/loadSender";
 import logger from "../lib/logger";
 import messaging from "../messaging";
 import options from "../lib/options";
-import bridge from "../lib/bridge";
+import bridge, { BridgeInfo } from "../lib/bridge";
 
 import { getChromeUserAgent } from "../lib/userAgents";
 import { getMediaTypesForPageUrl, stringify } from "../lib/utils";
@@ -656,7 +656,13 @@ async function initMediaOverlay () {
 async function checkBridgeCompat () {
     logger.info("checking for bridge...");
 
-    const info = await bridge.getInfo();
+    let info: BridgeInfo;
+    try {
+        info = await bridge.getInfo();
+    } catch (err) {
+        logger.info("... bridge issue!");
+        return;
+    }
 
     if (info.isVersionCompatible) {
         logger.info("... bridge compatible!");

ext/src/ui/options/Bridge.tsx

@@ -62,6 +62,7 @@ const BridgeStats = (props: BridgeStatsProps) => (
 interface BridgeProps {
     info?: BridgeInfo;
     loading: boolean;
+    loadingTimedOut: boolean;
     options?: Options;
     onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
 }
@@ -177,15 +178,20 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
     }
 
     private renderStatus () {
-        const infoClasses = `bridge__info ${this.props.info
+        const infoClasses = `bridge__info ${!this.props.info
-            ? "bridge__info--found"
+            ? this.props.loadingTimedOut
-            : "bridge__info--not-found"}`;
+                ? "bridge__info--timed-out"
+                : "bridge__info--not-found"
+            : "bridge__info--found"}`;
 
         let statusIcon: string;
         let statusTitle: string;
-        let statusText: (string | null);
+        let statusText: (string | null) = null;
 
-        if (!this.props.info) {
+        if (this.props.loadingTimedOut) {
+            statusIcon = "assets/icons8-warn-120.png";
+            statusTitle = _("optionsBridgeIssueStatusTitle");
+        } else if (!this.props.info) {
             statusIcon = "assets/icons8-cancel-120.png";
             statusTitle = _("optionsBridgeNotFoundStatusTitle");
             statusText = _("optionsBridgeNotFoundStatusText");
@@ -197,8 +203,6 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
                 statusIcon = "assets/icons8-warn-120.png";
                 statusTitle = _("optionsBridgeIssueStatusTitle");
             }
-
-            statusText = null;
         }
 
         return (

ext/src/ui/options/index.tsx

@@ -106,6 +106,7 @@ function getInputValue (input: HTMLInputElement) {
 interface OptionsAppState {
     hasLoaded: boolean;
     bridgeLoading: boolean;
+    bridgeLoadingTimedOut: boolean;
     isFormValid: boolean;
     hasSaved: boolean;
 
@@ -123,6 +124,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
         this.state = {
             hasLoaded: false
           , bridgeLoading: true
+          , bridgeLoadingTimedOut: false
           , isFormValid: true
           , hasSaved: false
         };
@@ -147,6 +149,13 @@ class OptionsApp extends Component<{}, OptionsAppState> {
           , platform: (await browser.runtime.getPlatformInfo()).os
         });
 
+        const bridgeTimeoutId = setTimeout(() => {
+            this.setState({
+                bridgeLoading: false
+              , bridgeLoadingTimedOut: true
+            });
+        }, 500);
+
         try {
             const bridgeInfo = await bridge.getInfo();
 
@@ -161,6 +170,8 @@ class OptionsApp extends Component<{}, OptionsAppState> {
                 bridgeLoading: false
             });
         }
+
+        clearTimeout(bridgeTimeoutId);
     }
 
     public render () {
@@ -176,6 +187,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
 
                     <Bridge info={ this.state.bridgeInfo }
                             loading={ this.state.bridgeLoading }
+                            loadingTimedOut={ this.state.bridgeLoadingTimedOut }
                             options={ this.state.options }
                             onChange={ this.handleInputChange } />
 

ext/src/ui/options/styles/index.css

@@ -130,6 +130,12 @@ button.ghost:not(:hover) {
     padding-inline-end: 25px;
 }
 
+.bridge__info--timed-out .bridge__status {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
 .bridge__status-title {
     margin: initial;
     font-weight: 600;
@@ -141,7 +147,6 @@ button.ghost:not(:hover) {
     margin: initial;
     margin-top: 5px;
     font-size: 1.15em;
-    font-weight: 300;
     text-align: center;
 }
 
@@ -162,7 +167,6 @@ button.ghost:not(:hover) {
 }
 .bridge__info--not-found .bridge__status-title {
     grid-area: status-title;
-    font-weight: normal;
     white-space: normal;
 }
 .bridge__info--not-found .bridge__status-text {