Promise toasts

<div class="demo">
  <div class="demo-row">
    <button class="demo-btn" id="ok">Save (succeeds)</button>
    <button class="demo-btn" id="fail">Save (fails)</button>
  </div>
  <p class="demo-out" id="out">Nothing yet</p>
</div>

import { toast, configure } from 'https://devix.pk/cdn/oss/toast@1.0.0/index.js';

configure({ position: 'bottom-center' });
const out = document.getElementById('out');

const save = (shouldFail) =>
  new Promise((resolve, reject) => setTimeout(() => (shouldFail ? reject(new Error('The server said no')) : resolve({ title: 'Q4 report' })), 1400));

const run = async (shouldFail) => {
  try {
    // The promise is handed straight back, so your own code still awaits it.
    const draft = await toast.promise(save(shouldFail), {
      loading: 'Saving…',
      success: (value) => `Saved “${value.title}”`,
      error: (error) => error.message,
    });
    out.textContent = `resolved with ${JSON.stringify(draft)}`;
  } catch (error) {
    out.textContent = `rejected with “${error.message}” — your catch still ran`;
  }
};

document.getElementById('ok').addEventListener('click', () => run(false));
document.getElementById('fail').addEventListener('click', () => run(true));

@import url('https://devix.pk/cdn/oss/toast@1.0.0/toast.min.css');