diff --git a/src/main/js/components/command-palette/index.js b/src/main/js/components/command-palette/index.js index 8f900acddd53..5ece1106aed0 100644 --- a/src/main/js/components/command-palette/index.js +++ b/src/main/js/components/command-palette/index.js @@ -94,18 +94,23 @@ function init() { } searchResultsContainer.style.height = searchResults.offsetHeight + "px"; + debouncedSpinner.cancel(); commandPaletteSearchBarContainer.classList.remove( "jenkins-search--loading", ); }); } + const debouncedSpinner = debounce(() => { + commandPaletteSearchBarContainer.classList.add("jenkins-search--loading"); + }, 150); + const debouncedLoad = debounce(() => { renderResults(); }, 150); commandPaletteInput.addEventListener("input", () => { - commandPaletteSearchBarContainer.classList.add("jenkins-search--loading"); + debouncedSpinner(); debouncedLoad(); }); @@ -121,10 +126,14 @@ function init() { function hideCommandPalette() { commandPalette.setAttribute("closing", ""); - commandPalette.addEventListener("animationend", () => { - commandPalette.removeAttribute("closing"); - commandPalette.close(); - }, {once: true}); + commandPalette.addEventListener( + "animationend", + () => { + commandPalette.removeAttribute("closing"); + commandPalette.close(); + }, + { once: true }, + ); } function itemMouseEnter(item) { diff --git a/src/main/scss/components/_command-palette.scss b/src/main/scss/components/_command-palette.scss index eab0aea8ccb3..09df860fb523 100644 --- a/src/main/scss/components/_command-palette.scss +++ b/src/main/scss/components/_command-palette.scss @@ -9,42 +9,40 @@ max-width: 100vw !important; margin: 0 !important; padding: 0 !important; - transform-style: preserve-3d; + user-select: none; &::backdrop { background: var(--command-palette-backdrop-background); backdrop-filter: contrast(0.7) brightness(0.9) saturate(1.25) blur(3px); - animation: jenkins-dialog-backdrop-animate-in 0.2s ease; + animation: jenkins-dialog-backdrop-animate-in 0.1s linear; } &[open] { - animation: command-palette-animate-in 0.2s cubic-bezier(0, 0.68, 0.5, 1.5); + animation: command-palette-animate-in 0.1s cubic-bezier(0, 0.68, 0.5, 1.5); } &[closing] { - animation: command-palette-animate-out 0.15s linear; + animation: command-palette-animate-out 0.1s linear; &::backdrop { - animation: jenkins-dialog-backdrop-animate-out 0.15s linear; + animation: jenkins-dialog-backdrop-animate-out 0.1s linear; } } } @keyframes command-palette-animate-in { from { - translate: 0 5px; - scale: 97.5%; + translate: 0 4px; + scale: 98.5%; opacity: 0; - filter: blur(15px); - transform: rotateX(40deg); + transform: rotateX(30deg); } } @keyframes command-palette-animate-out { to { - scale: 95%; + scale: 98.5%; opacity: 0; - filter: blur(2.5px); } } @@ -113,7 +111,7 @@ padding: 0.5rem; &__heading { - font-weight: 550; + font-weight: 500; font-size: 0.875rem; margin: 0; padding: 0.75rem 0.75rem 0.625rem; @@ -144,7 +142,6 @@ background: transparent; padding: 0.75rem; border-radius: 0.5rem; - font-weight: 550; cursor: pointer; color: var(--text-color) !important; transition: var(--standard-transition); @@ -193,7 +190,6 @@ } &__info { - font-weight: 550; font-size: 0.875rem; margin: 0; padding: 0 14px; diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss index ab4f6e9718cf..e520f9c7e69b 100644 --- a/src/main/scss/form/_search-bar.scss +++ b/src/main/scss/form/_search-bar.scss @@ -133,7 +133,7 @@ place-self: center center; opacity: 0; scale: 0; - filter: blur(5px); + filter: blur(2.5px); } &::after {