ref(js): Convert LoadingError to a FC (#34626)

Author: evanpurkhiser

static/app/components/loadingError.tsx

@@ -1,51 +1,41 @@
-import {Component} from 'react';
 import styled from '@emotion/styled';
 
 import Alert from 'sentry/components/alert';
 import Button from 'sentry/components/button';
 import {Panel} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
 
-type DefaultProps = {
-  message: React.ReactNode;
-};
-
-type Props = DefaultProps & {
+type Props = {
   className?: string;
+  message?: React.ReactNode;
   onRetry?: () => void;
 };
 
 /**
- * Renders an Alert box of type "error". Renders a "Retry" button only if a `onRetry` callback is defined.
+ * Renders an Alert box of type "error". Renders a "Retry" button only if a
+ * `onRetry` callback is defined.
  */
-class LoadingError extends Component<Props> {
-  static defaultProps: DefaultProps = {
-    message: t('There was an error loading data.'),
-  };
-
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  render() {
-    const {message, onRetry, className} = this.props;
-    return (
-      <StyledAlert
-        type="error"
-        showIcon
-        className={className}
-        trailingItems={
-          onRetry && (
-            <Button onClick={onRetry} type="button" priority="default" size="small">
-              {t('Retry')}
-            </Button>
-          )
-        }
-      >
-        {message}
-      </StyledAlert>
-    );
-  }
+function LoadingError({
+  className,
+  onRetry,
+  message = t('There was an error loading data.'),
+}: Props) {
+  return (
+    <StyledAlert
+      type="error"
+      showIcon
+      className={className}
+      trailingItems={
+        onRetry && (
+          <Button onClick={onRetry} type="button" priority="default" size="small">
+            {t('Retry')}
+          </Button>
+        )
+      }
+    >
+      {message}
+    </StyledAlert>
+  );
 }
 
 export default LoadingError;