diff --git a/chrome/content/zotero/integration/citationDialog.js b/chrome/content/zotero/integration/citationDialog.js
index 9972e3b36a..34c7f6e977 100644
--- a/chrome/content/zotero/integration/citationDialog.js
+++ b/chrome/content/zotero/integration/citationDialog.js
@@ -140,6 +140,8 @@ async function onLoad() {
 		if (accepted) return;
 		Zotero.debug("Citation Dialog: io loaded cited data");
 		await SearchHandler.refreshCitedItems();
+		// Replace the loading message with the actual preview before refreshing the list
+		await CitationPreview.render();
 		currentLayout.refreshItemsList({ retainItemsState: true });
 		if (_id("keepSorted").checked) {
 			IOManager._resortItems();
@@ -2089,6 +2091,7 @@ const CitationPreview = {
 		if (isEmpty) {
 			_id("citation-preview-content").innerHTML = "";
 			_id("citation-preview-error").hidden = true;
+			_id("citation-preview-loading").hidden = true;
 		}
 		// The toggle button is hidden when there's no preview and is restored to its last
 		// state when the preview pane appears
@@ -2104,6 +2107,14 @@ const CitationPreview = {
 		if (!DIALOG_STATE.isCitingItems()) return;
 		if (!CitationDataManager.items.length) return;
 		if (!io.preview) return;
+		// io.preview() waits for all cited data to be loaded, so show a loading
+		// message until then. The preview is rendered once ioReadyPromise resolves.
+		if (!ioIsReady) {
+			_id("citation-preview-content").hidden = true;
+			_id("citation-preview-error").hidden = true;
+			_id("citation-preview-loading").hidden = false;
+			return;
+		}
 
 		CitationDataManager.updateCitationObject();
 		let html;
@@ -2118,6 +2129,7 @@ const CitationPreview = {
 		// Re-check after the await in case the user cleared items
 		if (!CitationDataManager.items.length) return;
 		let errored = html === undefined;
+		_id("citation-preview-loading").hidden = true;
 		_id("citation-preview-content").hidden = errored;
 		_id("citation-preview-error").hidden = !errored;
 		_id("citation-preview-content").innerHTML = errored ? "" : html;
diff --git a/chrome/content/zotero/integration/citationDialog.xhtml b/chrome/content/zotero/integration/citationDialog.xhtml
index 6cd90058a6..fdc07d5237 100644
--- a/chrome/content/zotero/integration/citationDialog.xhtml
+++ b/chrome/content/zotero/integration/citationDialog.xhtml
@@ -112,6 +112,7 @@
 				<div id="citation-preview-wrapper" class="vbox">
 					<div id="citation-preview-content"></div>
 					<div id="citation-preview-error" data-l10n-id="integration-citationDialog-preview-error" hidden="true"></div>
+					<div id="citation-preview-loading" data-l10n-id="integration-citationDialog-preview-loading" hidden="true"></div>
 				</div>
 				<div class="divider subtle"></div>
 			</div>
diff --git a/chrome/locale/en-US/zotero/integration.ftl b/chrome/locale/en-US/zotero/integration.ftl
index cd1142ae5c..42fca34caf 100644
--- a/chrome/locale/en-US/zotero/integration.ftl
+++ b/chrome/locale/en-US/zotero/integration.ftl
@@ -51,6 +51,7 @@ integration-citationDialog-lib-message-annotations = { $search ->
 }
 integration-citationDialog-settings-keepSorted = Keep sources sorted
 integration-citationDialog-preview-error = Preview unavailable
+integration-citationDialog-preview-loading = Loading preview…
 integration-citationDialog-btn-displayPreview =
     .title = Display citation preview
 integration-citationDialog-btn-settings =
diff --git a/scss/components/_citationDialog.scss b/scss/components/_citationDialog.scss
index 9abef5df43..0c7f803823 100644
--- a/scss/components/_citationDialog.scss
+++ b/scss/components/_citationDialog.scss
@@ -587,7 +587,7 @@
 				font-size: 1.1rem;
 			}
 
-			#citation-preview-error {
+			#citation-preview-error, #citation-preview-loading {
 				padding-top: 2px;
 				color: var(--fill-secondary);
 				font-family: $font-family-base;