From 04fad1083085b9bb04fb5f00e7d2424253da91cd Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Thu, 9 May 2024 06:52:06 +0900
Subject: [PATCH] Issue #3443559 by mherchel, ckrina, finnsky, lauriii:
 Regression: Shortcuts menu flickers when the page is loaded

(cherry picked from commit c0beeeea5f9c9978afb46cac6bcbd94c06968bdf)
---
 core/modules/navigation/navigation.module          |  9 +++++++++
 ...cut-lazy-builder-lazyLinks--Shortcuts.html.twig | 14 ++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 core/modules/navigation/templates/big-pipe-interface-preview--navigation-shortcut-lazy-builder-lazyLinks--Shortcuts.html.twig

diff --git a/core/modules/navigation/navigation.module b/core/modules/navigation/navigation.module
index b5907091fd6..5378facb210 100644
--- a/core/modules/navigation/navigation.module
+++ b/core/modules/navigation/navigation.module
@@ -106,6 +106,15 @@ function navigation_theme($existing, $type, $theme, $path) {
     ],
   ];
 
+  $items['big_pipe_interface_preview__navigation_shortcut_lazy_builder_lazyLinks__Shortcuts'] = [
+    'variables' => [
+      'callback' => NULL,
+      'arguments' => NULL,
+      'preview' => NULL,
+    ],
+    'base hook' => 'big_pipe_interface_preview',
+  ];
+
   $items['block__navigation'] = [
     'render element' => 'elements',
     'base hook' => 'block',
diff --git a/core/modules/navigation/templates/big-pipe-interface-preview--navigation-shortcut-lazy-builder-lazyLinks--Shortcuts.html.twig b/core/modules/navigation/templates/big-pipe-interface-preview--navigation-shortcut-lazy-builder-lazyLinks--Shortcuts.html.twig
new file mode 100644
index 00000000000..91a276e9a73
--- /dev/null
+++ b/core/modules/navigation/templates/big-pipe-interface-preview--navigation-shortcut-lazy-builder-lazyLinks--Shortcuts.html.twig
@@ -0,0 +1,14 @@
+{#
+/**
+ * @file
+ * Placeholder content for the shortcuts menu. This is used to eliminate layout
+ * shifts as BigPipe injects data.
+ */
+#}
+
+{% include '@navigation/toolbar-button.html.twig' with {
+  attributes: create_attribute(),
+  extra_classes: 'invisible toolbar-button--icon--shortcuts toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
+  icon: 'shortcuts',
+  text: 'Shortcuts'|t,
+} only %}