async-render-1.js

app = async ({count,fraction}) => {
  const seconds = Math.floor(count / fraction);
  const div = document.createElement('div');
  const span = document.createElement('span');
  span.innerText = `${seconds}.${count % fraction}`;
  div.style.color = 'white'
  div.appendChild(span);
  return div;
};
client = () => {
  const render = (target, elem) => {
    target.innerHTML = '';
    target.appendChild(elem);
  };
  const maxSeconds = 4;
  const fraction = 100;
  const interval = 1000 / fraction;
  const maxCount = maxSeconds * fraction;
  const renderApp = async (props) => {
    render(document.body, await app(props));
  };
  const update = (count = 0) => {
    renderApp({count, fraction});
    setTimeout(() => {
      if (count < maxCount) {
        update(count + 1);
      }
    }, interval);
  };
  update();
};
server = async () => {
  const render = (elem) => {
    elem.outerHTML();
  };
  console.log(await app({count:0, fraction:100}));
};

async-render-2.js

app = async ({ getText }) => {
  const text = await getText();
  const div = document.createElement('div');
  div.innerText = text;
  div.style.color = 'white'
  return div;
};
getText = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('hello');
    }, 2000);
  });
};
render = (target, elem) => {
  target.innerHTML = '';
  target.appendChild(elem);
};
loader = async (elemPromise) => {
  const div = document.createElement('div');
  const loading = document.createElement('div');
  loading.innerText = 'Loading...';
  loading.style.color = 'white';
  render(div, loading);
  elemPromise.then((elem) => {
    render(div, elem);
  });
  return div;
};
client = () => {
  const renderApp = async () => {
    render(document.body, await loader(app({ getText })));
  };
  renderApp();
};
server = async () => {
  const render = (elem) => {
    elem.outerHTML();
  };
  console.log(await app({ getText }));
};