Improved the strange resizing issues for the main chart on new Dashboard

ghost/admin/app/components/dashboard/charts/anchor.hbs

@@ -35,11 +35,13 @@
                                 <div class="gh-loading-spinner"></div>
                             </div>      
                         {{else}}
-                            <EmberChart
+                            <div class="gh-dashboard-fader">
-                                @type={{this.chartType}}
+                                <EmberChart
-                                @data={{this.chartData}}
+                                    @type={{this.chartType}}
-                                @options={{this.chartOptions}}
+                                    @data={{this.chartData}}
-                                @height={{200}} />
+                                    @options={{this.chartOptions}}
+                                    @height={{200}} />
+                            </div>
                         {{/if}}
                     </div>
                     <div id="gh-dashboard-anchor-tooltip" class="gh-dashboard-tooltip">

ghost/admin/app/components/dashboard/charts/anchor.js

@@ -51,13 +51,32 @@ export default class Anchor extends Component {
     @service dashboardStats;
     @service feature;
     @tracked chartDisplay = 'total';
+    @tracked resizing = false;
+    @tracked resizeTimer = null;
 
     displayOptions = DISPLAY_OPTIONS;
 
+    willDestroy(...args) {
+        super.willDestroy(...args);
+        window.removeEventListener('resize', this.resizer, false);
+    }
+
+    // this helps with ChartJS resizing stretching bug when resizing
+    resizer = () => {
+        this.resizing = true;
+
+        clearTimeout(this.resizeTimer); // this uses a trick to trigger only when resize is done
+        this.resizeTimer = setTimeout(() => {
+            this.resizing = false;
+        }, 500);
+    };
+
     @action
     loadCharts() {
         this.dashboardStats.loadMemberCountStats();
 
+        window.addEventListener('resize', this.resizer, false);
+
         if (this.hasPaidTiers) {
             this.dashboardStats.loadMrrStats();
         }
@@ -73,7 +92,7 @@ export default class Anchor extends Component {
     }
 
     get loading() {
-        return this.dashboardStats.memberCountStats === null;
+        return this.dashboardStats.memberCountStats === null || this.resizing;
     }
 
     get totalMembers() {

ghost/admin/app/styles/layouts/dashboard.css

@@ -787,6 +787,15 @@ Dashboard Overview */
 /* --------------------------------- 
 Dashboard Anchor */
 
+@keyframes chartFadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 100;
+    }
+}
+
 .gh-dashboard-anchor {
     position: relative;
 }
@@ -1849,6 +1858,10 @@ Dashboard Tooltips */
     margin-top: 24px;
 }
 
+.gh-dashboard-fader {
+    animation: chartFadeIn 150ms;
+}
+
 .gh-dashboard-totals .gh-dashboard-loading,
 .gh-dashboard-totals .gh-dashboard-chart-container {
     height: 200px;