From 3f817cdb14bf219dd24653d2cc16da1284b396d2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 21 Nov 2024 15:18:41 +0000 Subject: [PATCH 1/2] Create PR for #1499 From e9ba773215f48ac229c38a2308cd11bf605917ad Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Thu, 21 Nov 2024 16:36:53 +0100 Subject: [PATCH 2/2] chore: load animations after LCP --- .changeset/five-zoos-suffer.md | 5 +++++ packages/core/src/components/bal-logo/bal-logo.tsx | 4 ++-- packages/core/src/components/bal-spinner/bal-spinner.tsx | 4 ++-- packages/core/src/test/seo/05-spinner.html | 4 ---- packages/core/stencil.config.ts | 2 +- 5 files changed, 10 insertions(+), 9 deletions(-) create mode 100644 .changeset/five-zoos-suffer.md diff --git a/.changeset/five-zoos-suffer.md b/.changeset/five-zoos-suffer.md new file mode 100644 index 0000000000..43205d14a2 --- /dev/null +++ b/.changeset/five-zoos-suffer.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': patch +--- + +**core**: performanct update to load animations of logo and spinner after LCP diff --git a/packages/core/src/components/bal-logo/bal-logo.tsx b/packages/core/src/components/bal-logo/bal-logo.tsx index a2a15a3d0d..2a076d6b00 100644 --- a/packages/core/src/components/bal-logo/bal-logo.tsx +++ b/packages/core/src/components/bal-logo/bal-logo.tsx @@ -2,7 +2,7 @@ import { Component, h, ComponentInterface, Host, Element, Prop, State, Functiona import { BEM } from '../../utils/bem' import type { AnimationItem } from 'lottie-web/build/player/lottie_light_html' import { Loggable, Logger, LogInstance } from '../../utils/log' -import { rIC } from '../../utils/helpers' +import { rLCP } from '../../utils/helpers' import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints, balBreakpoints } from '../../utils/breakpoints' import { BalConfigObserver, BalConfigState, ListenToConfig } from '../../utils/config' @@ -119,7 +119,7 @@ export class Logo implements ComponentInterface, Loggable, BalBreakpointObserver if (this.animationFunction) { return resolve() } else { - rIC(async () => { + rLCP(async () => { import(/* @vite-ignore */ './bal-logo.animation') .then(module => { this.animationFunction = module.animate diff --git a/packages/core/src/components/bal-spinner/bal-spinner.tsx b/packages/core/src/components/bal-spinner/bal-spinner.tsx index 013b7ab2b2..6cc0e13766 100644 --- a/packages/core/src/components/bal-spinner/bal-spinner.tsx +++ b/packages/core/src/components/bal-spinner/bal-spinner.tsx @@ -1,6 +1,6 @@ import { Component, h, Host, Prop, Element, Watch, ComponentInterface, State } from '@stencil/core' import type { AnimationItem } from 'lottie-web/build/player/lottie_light_html' -import { rIC } from '../../utils/helpers' +import { rLCP } from '../../utils/helpers' import { Loggable, Logger, LogInstance } from '../../utils/log' import { raf } from '../../utils/helpers' import { BEM } from '../../utils/bem' @@ -165,7 +165,7 @@ export class Spinner implements ComponentInterface, Loggable, BalConfigObserver if (this.animationFunction) { return resolve() } else { - rIC(async () => { + rLCP(async () => { import(/* @vite-ignore */ './bal-spinner.animation') .then(module => { this.animationFunction = module.animate diff --git a/packages/core/src/test/seo/05-spinner.html b/packages/core/src/test/seo/05-spinner.html index 6470ca5630..6fcddd0364 100644 --- a/packages/core/src/test/seo/05-spinner.html +++ b/packages/core/src/test/seo/05-spinner.html @@ -15,10 +15,6 @@
-

Spinner Page

diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index 1e408ac0d7..9fac1b2ed3 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -118,7 +118,7 @@ export const config: Config = { }, { src: join(packagesDir, 'styles', 'css', 'basic.min.css'), - dest: 'assets/basic.min.css', + dest: 'assets', warn: true, }, {