diff --git a/blocks/edit/da-content/da-content.js b/blocks/edit/da-content/da-content.js
index 5c9fcd8f..df482189 100644
--- a/blocks/edit/da-content/da-content.js
+++ b/blocks/edit/da-content/da-content.js
@@ -98,6 +98,7 @@ export default class DaContent extends LitElement {
           @close=${this.togglePane}></da-preview>
         <da-versions
           path=${this.details.fullpath}
+          .open=${this._showPane === 'versions'}
           class="${this._showPane === 'versions' ? 'is-visible' : ''}"
           @preview=${this.handleVersionPreview}
           @close=${this.togglePane}></da-versions>
diff --git a/blocks/edit/da-versions/da-versions.css b/blocks/edit/da-versions/da-versions.css
index d9e7bad2..163067ae 100644
--- a/blocks/edit/da-versions/da-versions.css
+++ b/blocks/edit/da-versions/da-versions.css
@@ -183,3 +183,55 @@
   font-style: italic;
   font-weight: 400;
 }
+
+/* Loading state */
+.da-version-entry.is-loading {
+  color: #8A8A8A;
+}
+
+.da-version-entry.is-loading .da-version-date {
+  font-size: 16px;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.da-version-loading-dot {
+  position: absolute;
+  top: 4px;
+  left: -35px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #C8C8C8;
+  animation: pulse-scale 1.2s ease-in-out infinite;
+}
+
+/* Fade in versions when loaded */
+.da-version-entry.is-version,
+.da-version-entry.is-audit {
+  animation: fade-in 0.3s ease-out;
+}
+
+@keyframes pulse-scale {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  50% {
+    transform: scale(1.3);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/blocks/edit/da-versions/da-versions.js b/blocks/edit/da-versions/da-versions.js
index 7d8f4ce6..f2195a1a 100644
--- a/blocks/edit/da-versions/da-versions.js
+++ b/blocks/edit/da-versions/da-versions.js
@@ -12,23 +12,29 @@ export default class DaVersions extends LitElement {
     path: { type: String },
     _versions: { state: true },
     _newVersion: { state: true },
+    _loading: { state: true },
   };
 
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [sheet];
-    this.getVersions();
   }
 
   async getVersions() {
+    this._loading = true;
+    this._versions = null;
     const resp = await daFetch(`${DA_ORIGIN}/versionlist${this.path}`);
-    if (!resp.ok) return;
+    if (!resp.ok) {
+      this._loading = false;
+      return;
+    }
     try {
       const json = await resp.json();
       this._versions = formatVersions(json);
     } catch {
       this._versions = [];
     }
+    this._loading = false;
   }
 
   handleClose() {
@@ -149,6 +155,15 @@ export default class DaVersions extends LitElement {
     return this._versions.map((entry) => html`${entry.isVersion ? this.renderVersion(entry) : this.renderAudits(entry)}`);
   }
 
+  renderLoading() {
+    return html`
+      <li class="da-version-entry is-loading">
+        <div class="da-version-loading-dot"></div>
+        <p class="da-version-date">Loading...</p>
+      </li>
+    `;
+  }
+
   render() {
     return html`
       <div class="da-versions-panel">
@@ -157,6 +172,7 @@ export default class DaVersions extends LitElement {
         </p>
         <ul class="da-version-list">
           ${this._newVersion ? this.renderNewVersion() : this.renderNow()}
+          ${this._loading ? this.renderLoading() : nothing}
           ${this._versions?.length > 0 ? this.renderVersionList() : nothing}
         </ul>
       </div>