fix: Redocly logo (#2109)

src/components/SideMenu/Logo.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+
+export default function RedoclyLogo(): JSX.Element | null {
+  const [isDisplay, setDisplay] = useState(false);
+
+  useEffect(() => {
+    setDisplay(true);
+  }, []);
+
+  return isDisplay ? (
+    <img
+      alt={'redocly logo'}
+      onError={() => setDisplay(false)}
+      src={'https://cdn.redoc.ly/redoc/logo-mini.svg'}
+    />
+  ) : null;
+}

src/components/SideMenu/SideMenu.tsx

@@ -8,6 +8,7 @@ import { MenuItems } from './MenuItems';
 
 import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
 import { RedocAttribution } from './styled.elements';
+import RedoclyLogo from './Logo';
 
 @observer
 export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
@@ -27,8 +28,8 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
         <MenuItems items={store.items} onActivate={this.activate} root={true} />
         <RedocAttribution>
           <a target="_blank" rel="noopener noreferrer" href="https://redocly.com/redoc/">
-            <img src={'https://cdn.redoc.ly/redoc/logo-mini.svg'} alt={'redocly logo'} /> API docs
+            <RedoclyLogo />
-            by Redocly
+            API docs by Redocly
           </a>
         </RedocAttribution>
       </PerfectScrollbarWrap>