add error nag when api performance is degraded

ui/component/app/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as PAGES from 'constants/pages';
+import { LBRY_TV_API } from 'config';
 import React, { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import analytics from 'analytics';
@@ -97,6 +98,7 @@ function App(props: Props) {
   const appRef = useRef();
   const isEnhancedLayout = useKonamiListener();
   const [hasSignedIn, setHasSignedIn] = useState(false);
+  const [currentlyDegradedPerformance, setCurrentlyDegradedPerformance] = useState(false);
   const userId = user && user.id;
   const hasVerifiedEmail = user && user.has_verified_email;
   const isRewardApproved = user && user.is_reward_approved;
@@ -246,6 +248,21 @@ function App(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [syncError, pathname]);
 
+  // @if TARGET='web'
+  useEffect(() => {
+    fetch(`${LBRY_TV_API}/internal/status`)
+      .then(response => response.json())
+      .then(status => {
+        if (status.general_state !== 'ok') {
+          throw Error();
+        }
+      })
+      .catch(err => {
+        setCurrentlyDegradedPerformance(true);
+      });
+  }, []);
+  // @endif
+
   // @if TARGET='web'
   // Require an internal-api user on lbry.tv
   // This also prevents the site from loading in the un-authed state while we wait for internal-apis to return for the first time
@@ -280,7 +297,24 @@ function App(props: Props) {
       )}
       {/* @endif */}
       {/* @if TARGET='web' */}
-      {showAnalyticsNag && !noNagOnPage && (
+      {currentlyDegradedPerformance && (
+        <Nag
+          type="error"
+          message={
+            <I18nMessage
+              tokens={{
+                more_information: <Button button="link" label={__('more')} href="https://status.lbry.com/" />,
+              }}
+            >
+              lbry.tv is currently experiencing issues. Try refreshing to fix it.
+            </I18nMessage>
+          }
+          actionText={__('Refresh')}
+          onClick={() => window.location.reload()}
+          onClose={() => setCurrentlyDegradedPerformance(false)}
+        />
+      )}
+      {!currentlyDegradedPerformance && showAnalyticsNag && !noNagOnPage && (
         <React.Fragment>
           {isMobile ? (
             <Nag

ui/component/common/nag.jsx

@@ -20,12 +20,27 @@ export default function Nag(props: Props) {
   const buttonProps = onClick ? { onClick } : { href };
 
   return (
-    <div className={classnames('nag', { 'nag--helpful': type === 'helpful' })}>
+    <div className={classnames('nag', { 'nag--helpful': type === 'helpful', 'nag--error': type === 'error' })}>
       {message}
-      <Button className={classnames('nag__button', { 'nag__button--helpful': type === 'helpful' })} {...buttonProps}>
+      <Button
+        className={classnames('nag__button', {
+          'nag__button--helpful': type === 'helpful',
+          'nag__button--error': type === 'error',
+        })}
+        {...buttonProps}
+      >
         {actionText}
       </Button>
-      {onClose && <Button className="nag__button nag__close" icon={ICONS.REMOVE} onClick={onClose} />}
+      {onClose && (
+        <Button
+          className={classnames('nag__button nag__close', {
+            'nag__button--helpful': type === 'helpful',
+            'nag__button--error': type === 'error',
+          })}
+          icon={ICONS.REMOVE}
+          onClick={onClose}
+        />
+      )}
     </div>
   );
 }

ui/scss/component/nag.scss

@@ -1,5 +1,9 @@
+$nag-z-index: 9999;
+$nag-helpful-z-index: 10000;
+$nag-error-z-index: 100001;
+
 .nag {
-  z-index: 9999;
+  z-index: $nag-z-index;
   position: fixed;
   left: 0;
   bottom: 0;
@@ -21,7 +25,13 @@
 .nag--helpful {
   background-color: var(--color-secondary);
   color: var(--color-white);
-  z-index: 10000; // Ensure helpful nags are on top of regular nags
+  z-index: $nag-helpful-z-index;
+}
+
+.nag--error {
+  background-color: var(--color-error);
+  color: var(--color-text-error);
+  z-index: $nag-error-z-index;
 }
 
 .nag__button {
@@ -46,6 +56,16 @@
   }
 }
 
+.nag__button--error {
+  color: var(--color-text-error);
+  border-color: var(--color-text-error);
+
+  &:hover {
+    background-color: var(--color-text-error);
+    color: var(--color-white);
+  }
+}
+
 .nag__close {
   margin-left: auto;
   right: var(--spacing-medium);