core/modules/big_pipe/big_pipe.libraries.yml       |  3 +++
 core/modules/big_pipe/css/big_pipe.css             |  4 +++
 core/modules/big_pipe/src/Render/BigPipe.php       | 11 +++-----
 .../src/Render/Placeholder/BigPipeStrategy.php     | 29 +++++++++++++++++++-
 core/modules/comment/src/CommentLazyBuilders.php   | 31 ++++++++++++++++++++++
 .../form/form--comment--preview.html.twig          |  3 +++
 6 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/core/modules/big_pipe/big_pipe.libraries.yml b/core/modules/big_pipe/big_pipe.libraries.yml
index 6da49b7..9a49d6a 100644
--- a/core/modules/big_pipe/big_pipe.libraries.yml
+++ b/core/modules/big_pipe/big_pipe.libraries.yml
@@ -1,5 +1,8 @@
 big_pipe:
   version: VERSION
+  css:
+    theme:
+      css/big_pipe.css: {}
   js:
     js/big_pipe.js: {}
   drupalSettings:
diff --git a/core/modules/big_pipe/css/big_pipe.css b/core/modules/big_pipe/css/big_pipe.css
new file mode 100644
index 0000000..49b1259
--- /dev/null
+++ b/core/modules/big_pipe/css/big_pipe.css
@@ -0,0 +1,4 @@
+div[data-big-pipe-placeholder-id] {
+  -webkit-filter: opacity(0.2) blur(1px);
+  filter: opacity(0.2) blur(1px);
+}
diff --git a/core/modules/big_pipe/src/Render/BigPipe.php b/core/modules/big_pipe/src/Render/BigPipe.php
index a965068..ef0cb99 100644
--- a/core/modules/big_pipe/src/Render/BigPipe.php
+++ b/core/modules/big_pipe/src/Render/BigPipe.php
@@ -539,14 +539,11 @@ protected function renderPlaceholder($placeholder, array $placeholder_render_arr
    *   only keep the first occurrence.
    */
   protected function getPlaceholderOrder($html, $placeholders) {
-    $fragments = explode('<div data-big-pipe-placeholder-id="', $html);
-    array_shift($fragments);
     $placeholder_ids = [];
-
-    foreach ($fragments as $fragment) {
-      $t = explode('"></div>', $fragment, 2);
-      $placeholder_id = $t[0];
-      $placeholder_ids[] = $placeholder_id;
+    $dom = Html::load($html);
+    $xpath = new \DOMXPath($dom);
+    foreach ($xpath->query('//div[@data-big-pipe-placeholder-id]') as $node) {
+      $placeholder_ids[] = Html::escape($node->getAttribute('data-big-pipe-placeholder-id'));
     }
     $placeholder_ids = array_unique($placeholder_ids);
 
diff --git a/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php b/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php
index 91ad604..b996e32 100644
--- a/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php
+++ b/core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php
@@ -4,6 +4,7 @@
 
 use Drupal\Component\Utility\Html;
 use Drupal\Component\Utility\UrlHelper;
+use Drupal\Core\Render\Markup;
 use Drupal\Core\Render\Placeholder\PlaceholderStrategyInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\Core\Session\SessionConfigurationInterface;
@@ -182,8 +183,34 @@ protected function doProcessPlaceholders(array $placeholders) {
   protected static function createBigPipeJsPlaceholder($original_placeholder, array $placeholder_render_array) {
     $big_pipe_placeholder_id = static::generateBigPipePlaceholderId($original_placeholder, $placeholder_render_array);
 
+    $interface_preview = [];
+
+    if (isset($placeholder_render_array['#lazy_builder'])) {
+      $callable = $placeholder_render_array['#lazy_builder'][0];
+      if (is_string($callable)) {
+        if (strpos($callable, ':') !== FALSE && strpos($callable, '::') === FALSE) {
+          try {
+            $callable = \Drupal::service('controller_resolver')->getControllerFromDefinition($callable . 'Preview');
+          }
+          catch (\InvalidArgumentException $e) {}
+        }
+        else {
+          $callable .= 'Preview';
+        }
+      }
+      else if (is_array($callable)) {
+        $callable[1] .= 'Preview';
+      }
+      if (is_callable($callable)) {
+        $interface_preview = $callable();
+        assert('is_array($interface_preview)', "Interface preview for $original_placeholder must be a render array.");
+      }
+    }
+
     return [
-      '#markup' => '<div data-big-pipe-placeholder-id="' . Html::escape($big_pipe_placeholder_id) . '"></div>',
+      '#prefix' => '<div data-big-pipe-placeholder-id="' . Html::escape($big_pipe_placeholder_id) . '">',
+      'interface preview' => $interface_preview,
+      '#suffix' => '</div>',
       '#cache' => [
         'max-age' => 0,
         'contexts' => [
diff --git a/core/modules/comment/src/CommentLazyBuilders.php b/core/modules/comment/src/CommentLazyBuilders.php
index 4eeeb59..2ab5f68 100644
--- a/core/modules/comment/src/CommentLazyBuilders.php
+++ b/core/modules/comment/src/CommentLazyBuilders.php
@@ -3,6 +3,7 @@
 namespace Drupal\comment;
 
 use Drupal\comment\Plugin\Field\FieldType\CommentItemInterface;
+use Drupal\Component\Utility\Random;
 use Drupal\Core\Entity\EntityFormBuilderInterface;
 use Drupal\Core\Entity\EntityInterface;
 use Drupal\Core\Entity\EntityManagerInterface;
@@ -110,6 +111,17 @@ public function renderForm($commented_entity_type_id, $commented_entity_id, $fie
     return $this->entityFormBuilder->getForm($comment);
   }
 
+  /**
+   * Interface preview for ::renderForm().
+   */
+  public function renderFormPreview() {
+    return [
+      '#type' => 'form',
+      '#theme' => 'form__comment__preview',
+      '#form_id' => 'comment_form_preview',
+    ];
+  }
+
   /**
    * #lazy_builder callback; builds a comment's links.
    *
@@ -150,6 +162,25 @@ public function renderLinks($comment_entity_id, $view_mode, $langcode, $is_in_pr
     return $links;
   }
 
+  /**
+   * Interface preview for ::renderLinks().
+   */
+  public function renderLinksPreview() {
+    return [
+      '#theme' => 'links__comment__preview',
+      '#pre_render' => ['drupal_pre_render_links'],
+      '#attributes' => ['class' => ['links', 'inline']],
+      'preview' => [
+        '#theme' => 'links__node',
+        '#links' => [
+          ['title' => '▆▆▆▆▆', 'url' =>  Url::fromRoute('<none>')],
+          ['title' => '▆▆▆▆▆', 'url' =>  Url::fromRoute('<none>')],
+        ],
+      ],
+    ];
+    return $this->renderer->renderPlain($links);
+  }
+
   /**
    * Build the default links (reply, edit, delete …) for a comment.
    *
diff --git a/core/themes/classy/templates/form/form--comment--preview.html.twig b/core/themes/classy/templates/form/form--comment--preview.html.twig
new file mode 100644
index 0000000..ec91299
--- /dev/null
+++ b/core/themes/classy/templates/form/form--comment--preview.html.twig
@@ -0,0 +1,3 @@
+<div style='height: 450px; background-color: lightgrey'>
+    <div style='position: absolute; bottom: 20px; width: 150px; height: 30px; background-color: darkgrey'></div>
+</div>