Marko: Await placeholder isn't being rendered

Created on 10 Sep 2020 · 2Comments · Source: marko-js/marko

Marko Version: 4.17.1

Details

Placeholder inside <@placeholder> tag isn't being rendered when using <await>. After I failed to get it working in my own case (in code example below), I've tried to reproduce an example given in your docs, but still had no luck.

Expected Behavior

The placeholder HTML (<span>Loading...</span>) should appear in the DOM and be rendered while waiting for the promise to be resolved

Actual Behavior

The placeholder HTML was not inserted into the DOM. Only after the resolution of the promise the markup with promise result was inserted.

Additional Info

Your Environment

Environment name and version: node.js 10.15.1, express.js 4.17.1
Operating System and version: Windows 10 2004 build 19041.450

Steps to Reproduce

My own example:

app.js

require('marko/node-require').install();
require('marko/express');

const express = require('express');
const template = require('./index');
const app = express();

// app.use(markoExpress.default())

app.get('/', (req, res) => {
  res.marko(template, {
    title: 'test',
    _flush: () => new Promise((res) => setTimeout(() => res('Flushed!'), 2000))
  });
});

app.listen(9000, () => console.log('listen to 9000'));

index.marko

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${data.title}</title>
</head>
<body>
  <span>Status: </span>
  <await(data._flush)>
    <@placeholder>
      <span>Loading...</span>
    </@placeholder>
    <@then|result|>
      <span>${result}</span>    
    </@then>
    <@catch|err|>
      <span>${err.message}</span>
    </@catch>
  </await>

</body>
</html>

unverified bug

Source

alexnaidovich

All 2 comments

@alexnaidovich the @placeholder is only used if you also specify the client-reorder attribute.

This is a bit confusing and we plan to change the behavior in the future.

DylanPiercey on 10 Sep 2020

👍1

For clarity, this is what your example should look like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${data.title}</title>
</head>
<body>
  <span>Status: </span>
  <await(data._flush) client-reorder>
    <@placeholder>
      <span>Loading...</span>
    </@placeholder>
    <@then|result|>
      <span>${result}</span>    
    </@then>
    <@catch|err|>
      <span>${err.message}</span>
    </@catch>
  </await>

</body>
</html>

DylanPiercey on 10 Sep 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings