Dashboard Performance: HtmlContent improvements (#4726)

* Dashboard Performance: Memoize HtmlContent

* Only render HtmlContent if there is a description

client/app/components/HtmlContent.jsx

@@ -2,14 +2,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import { sanitize } from "dompurify";
 
-export default function HtmlContent({ children, ...props }) {
+const HtmlContent = React.memo(function HtmlContent({ children, ...props }) {
   return (
     <div
       {...props}
       dangerouslySetInnerHTML={{ __html: sanitize(children) }} // eslint-disable-line react/no-danger
     />
   );
-}
+});
 
 HtmlContent.propTypes = {
   children: PropTypes.string,
@@ -18,3 +18,5 @@ HtmlContent.propTypes = {
 HtmlContent.defaultProps = {
   children: "",
 };
+
+export default HtmlContent;

client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx

@@ -94,9 +94,11 @@ function VisualizationWidgetHeader({ widget, refreshStartedAt, parameters, onPar
           <p>
             <QueryLink query={widget.getQuery()} visualization={widget.visualization} readOnly={!canViewQuery} />
           </p>
-          <HtmlContent className="text-muted markdown query--description">
-            {markdown.toHTML(widget.getQuery().description || "")}
-          </HtmlContent>
+          {!isEmpty(widget.getQuery().description) && (
+            <HtmlContent className="text-muted markdown query--description">
+              {markdown.toHTML(widget.getQuery().description || "")}
+            </HtmlContent>
+          )}
         </div>
       </div>
       {!isEmpty(parameters) && (