Merge branch 'tz-loading-hints-for-css' into 'master'

Adds loading hints to head for CSS Files

See merge request gitlab-org/gitlab!40018

app/views/layouts/_head.html.haml

@@ -16,12 +16,7 @@
 %head{ prefix: "og: http://ogp.me/ns#" }
   %meta{ charset: "utf-8" }
 
-  - if ActionController::Base.asset_host
-    %link{ rel: 'dns-prefetch', href: ActionController::Base.asset_host }
-    %link{ rel: 'preconnect', href: ActionController::Base.asset_host, crossorigin: '' }
-
-  - if Gitlab::CurrentSettings.snowplow_enabled? && Gitlab::CurrentSettings.snowplow_collector_hostname
-    %link{ rel: 'preconnect', href: Gitlab::CurrentSettings.snowplow_collector_hostname, crossorigin: '' }
+  = render 'layouts/loading_hints'
 
   %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
 

app/views/layouts/_loading_hints.html.haml

+- if ActionController::Base.asset_host
+  %link{ rel: 'dns-prefetch', href: ActionController::Base.asset_host }
+  %link{ rel: 'preconnect', href: ActionController::Base.asset_host, crossorigin: '' }
+- if user_application_theme == 'gl-dark'
+  %link{ { rel: 'preload', href: stylesheet_url('application_dark'), as: 'style' }, ActionController::Base.asset_host ? { crossorigin: '' } : {} }
+- else
+  %link{ { rel: 'preload', href: stylesheet_url('application'), as: 'style' }, ActionController::Base.asset_host ? { crossorigin: '' } : {} }
+%link{ { rel: 'preload', href: stylesheet_url("highlight/themes/#{user_color_scheme}"), as: 'style' }, ActionController::Base.asset_host ? { crossorigin: '' } : {} }
+- if Gitlab::CurrentSettings.snowplow_enabled? && Gitlab::CurrentSettings.snowplow_collector_hostname
+  %link{ rel: 'preconnect', href: Gitlab::CurrentSettings.snowplow_collector_hostname, crossorigin: '' }