fix: prevent blinking when loading tags

Kotlin · Sep 5, 2024 · 72e5a30 · 72e5a30
1 parent 7f6d9d4
commit 72e5a30
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 13 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts
@@ -2,10 +2,11 @@
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
 import './styles.scss';
+import { DESKTOP_MIN_WIDTH, getScreenType } from '../utils';
 
-const DESKTOP_MIN_WIDTH = 900;
 const TAGS_MARGIN = 4;
-const DROPDOWN_BUTTON_WIDTH = 40;
+const DROPDOWN_BUTTON_WIDTH_WITH_MARGIN = 44;
+const THRESHOLD_GAP = 10;
 
 /**
  * Filter section items are tags with platform names, they should fit in one line.
@@ -26,6 +27,10 @@ function displayItemAsOption(item: FilterSectionItem): void {
   item.option.removeAttribute('style');
 }
 
+function getTagsWidths(items: FilterSectionItem[]): number[] {
+  return items.map(({ tag }) => tag.getBoundingClientRect().width);
+}
+
 function initFilterSection(): void {
   const navigation = document.getElementById('navigation-wrapper');
   const libraryVersion = document.getElementById('library-version');
@@ -58,7 +63,7 @@ function initFilterSection(): void {
   /**
    * Saved widths of each tag while they were visible.
    * */
-  const tagsWidths: number[] = items.map(({ tag }) => tag.getBoundingClientRect().width);
+  let tagsWidths: number[] = items.map(({ tag }) => tag.getBoundingClientRect().width);
 
   /**
    * According to the design, filter section tags should fit between library version and navigation buttons.
@@ -84,7 +89,7 @@ function initFilterSection(): void {
       dropdownButton.removeAttribute('style');
       return;
     }
-    const availableWidth = getAvailableWidthForFilterSection() - DROPDOWN_BUTTON_WIDTH;
+    const availableWidth = getAvailableWidthForFilterSection() - DROPDOWN_BUTTON_WIDTH_WITH_MARGIN - THRESHOLD_GAP;
     let accumulatedWidth = 0;
     dropdownButton.setAttribute('style', 'display: none');
     items.forEach((item, index) => {
@@ -96,9 +101,18 @@ function initFilterSection(): void {
         dropdownButton.removeAttribute('style');
       }
     });
+    filterSection?.classList.remove('filter-section_loading');
   }
 
+  let prevScreenType = getScreenType();
+
   const resizeObserver = new ResizeObserver(() => {
+    const nextScreenType = getScreenType();
+    if (prevScreenType !== nextScreenType) {
+      items.forEach(displayItemAsTag);
+      tagsWidths = getTagsWidths(items);
+    }
+    prevScreenType = nextScreenType;
     displayFilterSectionItems();
     resizeObserver.unobserve(navigation);
   });

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss
@@ -7,13 +7,22 @@
   z-index: 1;
 
   display: flex;
+
   align-items: center;
   flex-wrap: wrap;
+  justify-content: flex-end;
+
+  max-height: 40px;
 
   margin-right: 12px;
   gap: 2px;
 
+  &_loading {
+    overflow: hidden;
+  }
+
   @media (width < $breakpoint-desktop-min) {
+    max-height: unset;
     margin-right: 0;
 
     & > :not(.dropdown) {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss
@@ -28,6 +28,8 @@
 
   display: inline-flex;
   align-items: center;
+
+  flex-shrink: 0;
   justify-content: center;
 
   width: 40px;

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss
@@ -8,7 +8,7 @@
 
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: flex-start;
 
   box-sizing: border-box;
@@ -18,6 +18,8 @@
   background-color: var(--color-background-nav);
 
   @media (width < $breakpoint-desktop-min) {
+    flex-wrap: wrap;
+
     height: auto;
     padding: 0;
   }

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/utils.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/utils.ts
@@ -11,3 +11,24 @@ export function hasAncestorWithClass(element: HTMLElement, className: string): b
   }
   return false;
 }
+
+export const DESKTOP_MIN_WIDTH = 900;
+export const TABLET_MIN_WIDTH = 440;
+
+export type ScreenType = 'mobile' | 'tablet' | 'desktop';
+
+export function isDesktop(): boolean {
+  return window.innerWidth >= DESKTOP_MIN_WIDTH;
+}
+
+export function isTablet(): boolean {
+  return window.innerWidth >= TABLET_MIN_WIDTH && window.innerWidth < DESKTOP_MIN_WIDTH;
+}
+
+export function isMobile(): boolean {
+  return window.innerWidth < TABLET_MIN_WIDTH;
+}
+
+export function getScreenType(): ScreenType {
+  return isMobile() ? 'mobile' : isTablet() ? 'tablet' : 'desktop';
+}
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/font-jb-sans-auto.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/font-jb-sans-auto.css
@@ -8,20 +8,23 @@
     src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
+    font-display: swap;
 }
 /* Regular weight */
 @font-face {
     font-family: 'JetBrains Sans';
     src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 /* SemiBold weight */
 @font-face {
     font-family: 'JetBrains Sans';
     src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
+    font-display: swap;
 }
 
 @supports (font-variation-settings: normal) {
@@ -32,5 +35,6 @@
         url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans.woff') format('woff-variations');
         font-weight: 100 900;
         font-style: normal;
+        font-display: swap;
     }
 }
diff --git a/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl b/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl
@@ -1,6 +1,6 @@
 <#macro display>
     <#if sourceSets?has_content>
-        <div class="filter-section" id="filter-section">
+        <div class="filter-section filter-section_loading" id="filter-section">
             <#list sourceSets as ss>
                 <button class="platform-tag platform-selector ${ss.platform}-like" data-active=""
                         data-filter="${ss.filter}">${ss.name}</button>

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
@@ -429,6 +429,7 @@
     right: 0;
     height: 100vh;
     max-height: unset;
+    padding: 0;
     border: none;
   }
 }
@@ -571,12 +572,19 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  justify-content: flex-end;
+  max-height: 40px;
   margin-right: 12px;
   gap: 2px;
 }
 
+.filter-section_loading {
+  overflow: hidden;
+}
+
 @media (width < 900px) {
   .filter-section {
+    max-height: unset;
     margin-right: 0;
   }
   .filter-section > :not(.dropdown) {
@@ -1072,7 +1080,7 @@
   z-index: 4;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: flex-start;
   box-sizing: border-box;
   padding: 12px var(--size-m1);
@@ -1082,6 +1090,7 @@
 
 @media (width < 900px) {
   .navigation {
+    flex-wrap: wrap;
     height: auto;
     padding: 0;
   }
@@ -1203,6 +1212,7 @@
   z-index: 0;
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   justify-content: center;
   width: 40px;
   height: 40px;