gitlab-ce/app/components/rapid_diffs/app_component.html.haml

55 lines
2.8 KiB
Plaintext

- if !lazy?
- helpers.add_page_startup_api_call diffs_stats_endpoint
- helpers.add_page_startup_api_call diff_files_endpoint
- if diffs_stream_url
- helpers.content_for :startup_js do
- javascript_tag nonce: content_security_policy_nonce do
:plain
var controller = new AbortController();
window.gl.rapidDiffsPreload = {
controller: controller,
streamRequest: fetch('#{Gitlab::UrlSanitizer.sanitize(diffs_stream_url)}', { signal: controller.signal })
}
%article.rd-app{ aria: { label: root_label }, data: { rapid_diffs: true, app_data: app_data.to_json } }
%header.rd-app-header{ aria: { label: header_label } }
.rd-app-file-browser-toggle
%div{ data: { file_browser_toggle: true } }
.rd-app-settings
%div{ data: { view_settings: true } }
.rd-app-body
.rd-app-sidebar{ data: { file_browser: true }, style: sidebar_style }
.rd-app-sidebar-loading{ data: { testid: 'rd-file-browser-loading' } }
= helpers.gl_loading_icon(size: 'sm')
-# using label produces better results in VoiceOver than labelledby + hidden h2
%section.rd-app-content{ aria: { label: content_label } }
.rd-app-content-header{ data: { hidden_files_warning: true } }
- if empty_state_visible?
= render RapidDiffs::EmptyStateComponent.new
.rd-app-code-theme.code.code-syntax-highlight-theme
.rd-app-diffs-list
-# performance optimization: using a sibling element to cover diffs list is faster than changing opacity on the parent
.rd-app-diffs-list-loading-overlay{ data: { diffs_overlay: true } }
%div{ data: { diffs_list: true } }
- if lazy?
.rd-app-diffs-loading{ data: { testid: 'rd-diffs-list-loading' } }
= helpers.gl_loading_icon(size: 'lg')
- else
= javascript_tag nonce: content_security_policy_nonce do
:plain
requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
- unless empty_state_visible?
- if diffs_list?
= diffs_list
- else
= render RapidDiffs::DiffFileComponent.with_collection(diffs_slice, parallel_view: parallel_view?)
- if diffs_stream_url
%div{ data: { stream_remaining_diffs: true } }
- else
= javascript_tag nonce: content_security_policy_nonce do
:plain
requestAnimationFrame(() => {
window.performance.mark('rapid-diffs-list-loaded');
window.performance.measure('rapid-diffs-list-loading', 'rapid-diffs-first-diff-file-shown', 'rapid-diffs-list-loaded');
})