Issue #3444740 by ahsannazir, Utkarsh_33, Gauravvvv, Kanchan Bhogade, smustgrave, bnjmnm, nod_: Layout shift on displays in views page

core/themes/claro/claro.theme

@@ -59,6 +59,18 @@ function claro_page_attachments_alter(array &$attachments) {
     ],
     'dropbutton_noscript',
   ];
+
+  $attachments['#attached']['html_head'][] = [
+    [
+      '#tag' => 'link',
+      '#noscript' => TRUE,
+      '#attributes' => [
+        'rel' => 'stylesheet',
+        'href' => $theme_path . '/css/components/views-ui-noscript.css?' . $query_string,
+      ],
+    ],
+    'views_ui_noscript',
+  ];
 }
 
 /**

core/themes/claro/css/base/elements.css

@@ -253,3 +253,14 @@ img {
   outline: var(--focus-outline);
   box-shadow: var(--focus-box-shadow);
 }
+
+/**
+ * These elements should not be displayed until they are processed
+ * by JavaScript, and views-ui-noscript.css exists so browsers
+ * without JavaScript will still display them
+ */
+
+.views-tabs,
+.views-display-top > input.button {
+  display: none;
+}

core/themes/claro/css/base/elements.pcss.css

@@ -209,3 +209,13 @@ img {
   outline: var(--focus-outline);
   box-shadow: var(--focus-box-shadow);
 }
+
+/**
+ * These elements should not be displayed until they are processed
+ * by JavaScript, and views-ui-noscript.css exists so browsers
+ * without JavaScript will still display them
+ */
+.views-tabs,
+.views-display-top > input.button {
+  display: none;
+}

core/themes/claro/css/components/views-ui-noscript.css

@@ -0,0 +1,16 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * Views UI Tabs styles for when JavaScript is not loaded.
+ */
+#views-display-menu-tabs {
+  display: flex;
+}
+div.views-display-top input.button {
+  display: inline-block;
+}

core/themes/claro/css/components/views-ui-noscript.pcss.css

@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Views UI Tabs styles for when JavaScript is not loaded.
+ */
+#views-display-menu-tabs {
+  display: flex;
+}
+
+div.views-display-top {
+  input.button {
+    display: inline-block;
+  }
+}