generated from custom-cards/boilerplate-card
-
-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add loading spinner on card initialization (#1549)
* feat: Add loading spinner on card initialization * Minor doc fix.
- Loading branch information
1 parent
650d99e
commit b46ea36
Showing
7 changed files
with
139 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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` <img src="${irisLogo}" /> `; | ||
} | ||
|
||
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters