From 25a14c87a5cc69b24d65ca045ffe224ec98f3871 Mon Sep 17 00:00:00 2001
From: Wendelin <w@pe8.at>
Date: Tue, 18 Feb 2025 15:18:53 +0100
Subject: [PATCH] Delay skeleton loading to prevent flickering

---
 src/components/ha-sidebar.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index b305fbcacc..2d530a94af 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -1211,7 +1211,35 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           transform: scaleX(var(--scale-direction));
         }
 
+        @keyframes skeletonAnimate {
+          0% {
+            opacity: 0;
+          }
+          50% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
+
+        @keyframes contentAnimate {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
+
         .loading {
+          opacity: 0;
+          animation-name: skeletonAnimate;
+          animation-duration: 2000ms;
+          animation-delay: 0;
+          animation-iteration-count: 1;
+          animation-fill-mode: forwards;
+          animation-timing-function: ease-out;
           padding: 16px;
           display: flex;
           flex-direction: column;