${this._renderMenuStatusContainer('overlay')}
- ${
- // Always want to render
even if there's a message, to
- // ensure live preload is always present (even if not displayed).
- html``
- }
+
${
// Keep message rendering to last to show messages that may have been
// generated during the render.
diff --git a/src/components/loading.ts b/src/components/loading.ts
new file mode 100644
index 00000000..03e5bf6a
--- /dev/null
+++ b/src/components/loading.ts
@@ -0,0 +1,49 @@
+import {
+ CSSResultGroup,
+ LitElement,
+ PropertyValues,
+ TemplateResult,
+ html,
+ unsafeCSS,
+} from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import irisLogo from '../images/camera-iris.svg';
+import controlStyle from '../scss/loading.scss';
+import { Timer } from '../utils/timer';
+
+// Number of seconds after the loading spinner is hidden before rendering this
+// component as empty. Should be longer than the opacity css transition time.
+const LOADING_EMPTY_SECONDS = 2;
+
+@customElement('frigate-card-loading')
+export class FrigateCardLoading extends LitElement {
+ @property({ attribute: true, reflect: true, type: Boolean })
+ public show = false;
+
+ @state()
+ protected _empty = false;
+
+ protected _timer = new Timer();
+
+ protected render(): TemplateResult {
+ return this._empty ? html`` : html` 
`;
+ }
+
+ protected willUpdate(changedProps: PropertyValues): void {
+ if (changedProps.has('show') && !this.show) {
+ this._timer.start(LOADING_EMPTY_SECONDS, () => {
+ this._empty = true;
+ });
+ }
+ }
+
+ static get styles(): CSSResultGroup {
+ return unsafeCSS(controlStyle);
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'frigate-card-loading': FrigateCardLoading;
+ }
+}
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 1005e734..3a76d388 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -13,6 +13,7 @@
border-radius: var(--ha-card-border-radius, 4px);
height: var(--frigate-card-height);
+ min-height: 100px;
// Ensure all clicks at the top level work.
pointer-events: all;
@@ -29,6 +30,12 @@
--frigate-card-height: auto;
}
+frigate-card-loading {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+}
+
:host([dark]) {
filter: brightness(75%);
}
diff --git a/src/scss/loading.scss b/src/scss/loading.scss
new file mode 100644
index 00000000..7a21999b
--- /dev/null
+++ b/src/scss/loading.scss
@@ -0,0 +1,40 @@
+:host {
+ height: 100%;
+ width: 100%;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ pointer-events: none;
+
+ transition: opacity 1s;
+}
+
+:host([show]) {
+ opacity: 1;
+}
+
+:host(:not([show])) {
+ opacity: 0;
+}
+
+img {
+ width: 40%;
+ height: 40%;
+
+ opacity: 0.2;
+
+ filter: invert(100%);
+
+ animation: rotate 8s linear infinite;
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/tests/card-controller/initialization-manager.test.ts b/tests/card-controller/initialization-manager.test.ts
index 628cf94e..8052d8cc 100644
--- a/tests/card-controller/initialization-manager.test.ts
+++ b/tests/card-controller/initialization-manager.test.ts
@@ -57,6 +57,7 @@ describe('InitializationManager', () => {
it('without hass', async () => {
const manager = new InitializationManager(createCardAPI());
await manager.initializeMandatory();
+ expect(manager.wasEverInitialized()).toBeFalsy();
});
it('without config', async () => {
@@ -67,6 +68,7 @@ describe('InitializationManager', () => {
vi.mocked(sideLoadHomeAssistantElements).mockResolvedValue(true);
await manager.initializeMandatory();
+ expect(manager.wasEverInitialized()).toBeFalsy();
});
it('successfully', async () => {
@@ -94,6 +96,8 @@ describe('InitializationManager', () => {
expect(api.getViewManager().initialize).toBeCalled();
expect(api.getMicrophoneManager().connect).not.toBeCalled();
expect(api.getCardElementManager().update).toBeCalled();
+
+ expect(manager.wasEverInitialized()).toBeTruthy();
});
it('successfully with microphone if configured', async () => {