From 6c755f6f7cc371f53a0b97901bae744113856ecd Mon Sep 17 00:00:00 2001
From: Micaela Goffe <micaela.goffe@neovici.se>
Date: Mon, 2 Sep 2024 12:57:42 +0200
Subject: [PATCH] fix: change transition behavior to prevent two bottom bars
 appear simultaneously

---
 cosmoz-bottom-bar.html.js |  4 ----
 cosmoz-bottom-bar.js      | 40 ++++++++++++++++++++++-----------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/cosmoz-bottom-bar.html.js b/cosmoz-bottom-bar.html.js
index 56f445a..4bd58f7 100644
--- a/cosmoz-bottom-bar.html.js
+++ b/cosmoz-bottom-bar.html.js
@@ -10,7 +10,6 @@ export default html`
 			width: 100%;
 			max-width: 100%; /* Firefox fix */
 			background-color: inherit;
-			transition: max-height 0.3s ease;
 			flex: none;
 			background-color: var(
 				--cosmoz-bottom-bar-bg-color,
@@ -32,9 +31,6 @@ export default html`
 				padding: 0;
 			};
 		}
-		:host([force-open]) {
-			transition: none;
-		}
 		[hidden],
 		::slotted([hidden]) {
 			display: none !important;
diff --git a/cosmoz-bottom-bar.js b/cosmoz-bottom-bar.js
index 6dbb800..43daaa0 100644
--- a/cosmoz-bottom-bar.js
+++ b/cosmoz-bottom-bar.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 /* eslint-disable max-lines */
 import {
 	PolymerElement,
@@ -371,31 +372,36 @@ class CosmozBottomBar extends PolymerElement {
 	}
 
 	_showHideBottomBar(visible) {
-		this.style.transitionDuration = 0;
-		this.style.display = '';
+		const info = this.shadowRoot.querySelector('#bar #info');
+
+		if (!this.id) {
+			this.style.viewTransitionName = 'bottom-bar-no-row-selected';
+		} else if (this.id === 'bottomBar') {
+			this.style.viewTransitionName = 'bottom-bar-rows-selected';
+		} else {
+			return;
+		}
+
 		this.style.maxHeight = '';
+		info.style.visibility = '';
 
 		const height = this.computedBarHeight,
-			to = !visible ? '0px' : height + 'px';
+			to = !visible ? '0px' : height + 'px',
+			from = visible ? '0px' : height + 'px';
 
-		let from = visible ? '0px' : height + 'px';
+		this.style.maxHeight = from;
+		info.style.visibility = 'hidden';
 
-		if (!this[rendered]) {
-			from = to;
-			this[rendered] = true;
+		if (!document.startViewTransition) {
+			this.style.transition = 'max-height 0.3s ease-in-out';
+			this.style.maxHeight = to;
+			info.style.visibility = 'visible';
+			return;
 		}
 
-		this.style.maxHeight = from;
-
-		const onEnd = () => {
-			this.removeEventListener('transitionend', onEnd);
-			this.style.maxHeight = '';
-			this.style.display = this.visible ? '' : 'none';
-		};
-		requestAnimationFrame(() => {
-			this.addEventListener('transitionend', onEnd);
-			this.style.transitionDuration = '';
+		document.startViewTransition(() => {
 			this.style.maxHeight = to;
+			info.style.visibility = 'visible';
 		});
 	}
 }