diff --git a/umap/static/umap/js/modules/data/features.js b/umap/static/umap/js/modules/data/features.js
index a9171a72..6b60f9dc 100644
--- a/umap/static/umap/js/modules/data/features.js
+++ b/umap/static/umap/js/modules/data/features.js
@@ -199,8 +199,9 @@ class Feature {
       this._umap.slideshow.current = this
     }
     this._umap.currentFeature = this
-    this.attachPopup()
-    this.ui.openPopup(latlng || this.center)
+    this.attachPopup().then(() => {
+      this.ui.openPopup(latlng || this.center)
+    })
   }
 
   render(fields) {
@@ -355,9 +356,11 @@ class Feature {
     return loadPopup(this.getOption('popupShape') || old)
   }
 
-  attachPopup() {
+  async attachPopup() {
     const Class = this.getPopupClass()
-    this.ui.bindPopup(new Class(this))
+    const popup = new Class(this)
+    this.ui.bindPopup(popup)
+    return popup.loadContent()
   }
 
   async confirmDelete() {
diff --git a/umap/static/umap/js/modules/rendering/popup.js b/umap/static/umap/js/modules/rendering/popup.js
index 7c07a39e..0b87d01e 100644
--- a/umap/static/umap/js/modules/rendering/popup.js
+++ b/umap/static/umap/js/modules/rendering/popup.js
@@ -22,10 +22,9 @@ const Popup = BasePopup.extend({
   initialize: function (feature) {
     this.feature = feature
     BasePopup.prototype.initialize.call(this, {}, feature.ui)
-    this.getContentFromTemplate()
   },
 
-  getContentFromTemplate: async function () {
+  loadContent: async function () {
     const container = DomUtil.create('div', 'umap-popup')
     const name = this.feature.getOption('popupTemplate')
     this.content = await loadTemplate(name, this.feature, container)