fix: inconsistent hero cls (#839)

* ci: add lighthouse audit for desktop

* fix: set separate hero skeleton heights for mobile and desktop

* docs: update changelog

.github/workflows/lighthouse-mobile-audit.yml

@@ -58,5 +58,6 @@ jobs:
 
       - name: lighthouse mobile audit
         run: yarn lhci:mobile
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+      - name: lighthouse desktop audit
+        run: yarn lhci:desktop

apps/web/components/ui/HeroContent/HeroContentSkeleton.vue

@@ -3,7 +3,7 @@
     class="flex flex-col md:flex-row-reverse md:justify-center mx-auto mb-10 text-center animate-pulse p-4 border-neutral-200 border-b"
   >
     <div class="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
-      <div class="h-[567px] bg-gray-300 rounded-sm"></div>
+      <div class="h-[376px] md:h-[500px] bg-gray-300 rounded-sm"></div>
     </div>
     <div class="p-4 md:p-10 md:max-w-[768px] md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
       <div class="h-6 sm:h-8 bg-gray-300 rounded-sm w-full mb-2"></div>

docs/changelog/changelog_en.md

@@ -59,6 +59,7 @@ Each client supports two PWA instances. With this change, you can designate the
 - The language selector is no longer displayed if only one language is configured.
 - Fixed an issue with category product prices not being updated on page change.
 - Added SSR rendering for homepage.
+- Improved CLS for hero skeleton.
 
 ## v1.7.0 (2024-11-06) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.6.0...v1.7.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 

lighthouserc.desktop.json

@@ -0,0 +1,16 @@
+{
+  "ci": {
+    "collect": {
+      "startServerCommand": "yarn start",
+      "settings": {
+        "preset": "desktop"
+      },
+      "url": [
+        "http://localhost:3000/?desktop",
+        "http://localhost:3000/living-room?desktop",
+        "http://localhost:3000/living-room/sofas/2-seater-sofa-sunflower_127?desktop"
+      ],
+      "numberOfRuns": 3
+    }
+  }
+}

lighthouserc.json

@@ -1,13 +1,6 @@
 {
   "ci": {
     "collect": {
-      "startServerCommand": "yarn start",
-      "url": [
-        "http://localhost:3000/",
-        "http://localhost:3000/living-room",
-        "http://localhost:3000/living-room/sofas/2-seater-sofa-sunflower_127"
-      ],
-      "numberOfRuns": 3,
       "assert": {
         "includePassedAssertions": false,
         "assertMatrix": [

lighthouserc.mobile.json

@@ -0,0 +1,13 @@
+{
+  "ci": {
+    "collect": {
+      "startServerCommand": "yarn start",
+      "url": [
+        "http://localhost:3000/?mobile",
+        "http://localhost:3000/living-room?mobile",
+        "http://localhost:3000/living-room/sofas/2-seater-sofa-sunflower_127?mobile"
+      ],
+      "numberOfRuns": 3
+    }
+  }
+}

package.json

@@ -28,7 +28,8 @@
     "test:cypress-quarantine": "concurrently -k -s=first \"yarn wait-on http-get://localhost:3000 && yarn turbo:disable-telemetry && turbo run test:cypress-quarantine\" \"yarn start\"",
     "test:cypress": "concurrently -k -s=first \"yarn wait-on http-get://localhost:3000 && yarn turbo:disable-telemetry && turbo run test:cypress\" \"yarn start\"",
     "test:cypress-dev": "concurrently -k -s=first \"yarn wait-on http-get://localhost:3000 && yarn turbo:disable-telemetry && turbo run test:cypress-dev\" \"yarn start\"",
-    "lhci:mobile": "lhci autorun"
+    "lhci:mobile": "lhci collect --config=lighthouserc.mobile.json && lhci assert",
+    "lhci:desktop": "lhci collect --config=lighthouserc.desktop.json && lhci assert"
   },
   "dependencies": {
     "@plentymarkets/shop-api": "^0.76.0",