Work that takes a moment

<div class="demo">
  <button class="demo-btn" id="publish">Publish</button>
  <p class="demo-out" id="out">Not published</p>
  <p class="demo-hint">The first attempt fails on purpose; press Publish again in the dialog.</p>
</div>

import { dialog } from 'https://www.devix.pk/cdn/oss/confirm-dialog@1.0.0/index.js';

const out = document.getElementById('out');
let attempts = 0;

document.getElementById('publish').addEventListener('click', async () => {
  attempts = 0;
  const answer = await dialog({
    title: 'Publish this article?',
    description: 'It appears on the site immediately.',
    confirmText: 'Publish',
    tone: 'info',
    // Throwing keeps the dialog open and puts the message inside it.
    onConfirm: () =>
      new Promise((resolve, reject) => {
        setTimeout(() => (++attempts === 1 ? reject(new Error('The server refused: try again')) : resolve()), 900);
      }),
  });
  out.textContent = answer?.confirmed ? `Published after ${attempts} attempts` : 'Not published';
});

@import url('https://www.devix.pk/cdn/oss/confirm-dialog@1.0.0/confirm-dialog.min.css');