diff --git a/ghost/admin/app/components/dashboard/charts/anchor.hbs b/ghost/admin/app/components/dashboard/charts/anchor.hbs
index 36983e93dc..6be0b8899a 100644
--- a/ghost/admin/app/components/dashboard/charts/anchor.hbs
+++ b/ghost/admin/app/components/dashboard/charts/anchor.hbs
@@ -35,11 +35,13 @@
{{else}}
-
+
+
+
{{/if}}
diff --git a/ghost/admin/app/components/dashboard/charts/anchor.js b/ghost/admin/app/components/dashboard/charts/anchor.js
index 0065d85783..ff6f123208 100644
--- a/ghost/admin/app/components/dashboard/charts/anchor.js
+++ b/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() {
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 7db4584b6a..6e08dee582 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/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;