feat(elements): Add performance improvements to uptimelink-webwidget

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2024-06-27 - 1.1.0 - feat(elements)
+Add performance improvements to uptimelink-webwidget
+
+- Added 'will-change: transform' to improve performance of the transform property
+- Increased transition speed for element opacity from 0.2s to 0.1s for faster visual feedback
+- Added scale transformation effect to the focused state of the widget
+
 ## 2024-06-27 - 1.0.82 - fix(core)
 No code changes detected. Preparing for version increment based on package state.
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/webwidget',
-  version: '1.0.82',
+  version: '1.1.0',
   description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
 }

ts_web/elements/uptimelink-webwidget.ts

@@ -67,6 +67,7 @@ export class UptimelinkWebwidget extends DeesElement {
           cursor: pointer;
           transition: all 0.2s;
           overflow: hidden;
+          will-change: transform;
         }
 
         .firstLine {
@@ -77,6 +78,7 @@ export class UptimelinkWebwidget extends DeesElement {
         .mainbox.focused {
           width: 182px;
           height: 117px;
+          transform: scale(1.1, 1.1);
         }
 
         .statusindicator {
@@ -91,7 +93,7 @@ export class UptimelinkWebwidget extends DeesElement {
 
         .expanded {
           opacity: 0;
-          transition: opacity 0.2s;
+          transition: opacity 0.1s;
         }
 
         .miniHeading {
@@ -199,7 +201,7 @@ export class UptimelinkWebwidget extends DeesElement {
       }
       this.showExpanded = true;
       await this.performUpdate();
-      await (await this.domtoolsPromise).convenience.smartdelay.delayFor(50);
+      await domtools.convenience.smartdelay.delayFor(0);
       const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
       expandedDiv.style.opacity = '1';
     };