⚡ perf: Animated logo & spinner load animation after LCD (#1511)

* Create PR for #1499 * chore: load animations after LCP --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
baloise · Nov 22, 2024 · f4440b0 · f4440b0
1 parent 344f6a3
commit f4440b0
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/.changeset/five-zoos-suffer.md 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
@@ -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
@@ -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
@@ -15,10 +15,6 @@
   <body>
     <bal-app>
       <main class="container py-medium">
-        <!-- <div>
-          <bal-button bal-popup="my-popup">Click me</bal-button>
-          <bal-popup id="my-popup" label="Popup Label" backdrop-dismiss="true">Popup content</bal-popup>
-        </div> -->
         <bal-spinner></bal-spinner>
         <h1 class="title">Spinner Page</h1>
         <table class="table">

diff --git 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,
         },
         {