feat: improve loading speed for legacy table chart (#9234)

* perf(table-chart): upgrade to 0.11.6

Upgrade table chart `@superset-ui/legacy-plugins-chart-table`
to https://github.com/apache-superset/superset-ui-plugins/pull/385

* refactor: use ternary instead of if

* fix: rename variables

superset-frontend/package.json

@@ -76,7 +76,7 @@
     "@superset-ui/legacy-plugin-chart-rose": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-sankey": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-sunburst": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-table": "^0.11.15",
+    "@superset-ui/legacy-plugin-chart-table": "^0.11.16",
     "@superset-ui/legacy-plugin-chart-treemap": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-word-cloud": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-world-map": "^0.11.15",

superset-frontend/src/chart/ChartRenderer.jsx

@@ -222,13 +222,23 @@ class ChartRenderer extends React.Component {
       queryResponse,
     } = this.props;
 
+    // It's bad practice to use unprefixed `vizType` as classnames for chart
+    // container. It may cause css conflicts as in the case of legacy table chart.
+    // When migrating charts, we should gradually add a `superset-chart-` prefix
+    // to each one of them.
+    const snakeCaseVizType = snakeCase(vizType);
+    const chartClassName =
+      vizType === 'table'
+        ? `superset-chart-${snakeCaseVizType}`
+        : snakeCaseVizType;
+
     return (
       <>
         {this.renderTooltip()}
         <SuperChart
           disableErrorBoundary
           id={`chart-id-${chartId}`}
-          className={`${snakeCase(vizType)}`}
+          className={chartClassName}
           chartType={vizType}
           width={width}
           height={height}

superset-frontend/src/dashboard/stylesheets/dashboard.less

@@ -60,6 +60,7 @@ body {
   position: relative;
   font-size: @font-size-l;
   font-weight: @font-weight-bold;
+  margin-bottom: 4px;
 
   .dropdown.btn-group {
     position: absolute;