Preset the data-bridge-platform and data-bridge-components on the body element from the user-agent. This prevents css flashes before the native bridge is registered in the app.

2026-03-17 09:59:45 -04:00
parent 768e7a3a6e
commit 09e4bb13d3
2 changed files with 24 additions and 1 deletions
@@ -43,6 +43,17 @@ class ApplicationPlatform < PlatformAgent
    operating_system == "Windows"
  end

+  def bridge_name
+    case
+    when native? && android? then :android
+    when native? && ios?     then :ios
+    end
+  end
+
+  def bridge_components
+    extract_list_from_native_user_agent("bridge-components")
+  end
+
  def type
    if native? && android?
      "native android"
@@ -67,4 +78,13 @@ class ApplicationPlatform < PlatformAgent
      os =~ /Linux/ ? "Linux" : os
    end
  end
+
+  private
+    def extract_list_from_native_user_agent(prefix)
+      if native?
+        user_agent.to_s.match(/#{prefix}: \[(.+)\]/) { |matches| matches[1] }.to_s
+      else
+        ""
+      end
+    end
 end
@@ -5,7 +5,10 @@
  <body class="<%= @body_class %>"
    data-controller="local-time timezone-cookie turbo-navigation theme bridge--title bridge--text-size bridge--insets"
    data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation"
-    data-platform="<%= platform.type %>" data-bridge--title-title-value="<%= @page_title %>">
+    data-platform="<%= platform.type %>"
+    data-bridge-platform="<%= platform.bridge_name %>"
+    data-bridge-components="<%= platform.bridge_components %>"
+    data-bridge--title-title-value="<%= @page_title %>">
    <div id="global-container" data-controller="bridge--buttons bridge--overflow-menu">
      <header class="header header--mobile-actions-stack <%= @header_class %>" id="header">
        <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>