Cumulative layout shift issue

Ask the Community General Questions
1

Hi, I am coming across this issue with CLS and noticed the request for the widget to allocate a space before loading was not answered. Can this be done?

2 Likes
3

Hi there, @user20325 and welcome to the Community:wave:

Could you please send me a link to the page where your widget is installed?

1 Like
4

Hi,

Thanks for your response,

A page example : https://hikeandbikeholidays.com/holidays-spain/mtb-cycling-hiking-holidays-and-tours

2 Likes
5

Thanks!

I’ve shared it with the devs! I’ll report back as soon as I have their response :slightly_smiling_face:

1 Like
6

Thanks Max.

Best regards

Wayne Pickering

Wayne Pickering & Heather Cooper
Hike and Bike the Sierras - Founders & Guides

Web: hikeandbikeholidays.com
Mob & WhatsApp: +34 638 87 32 79
Address: Ronda, Malaga, 29400 Spain
Facebook: facebook.com/hikeandbikeholidays

1 Like
7

Hi there, @user20325 :wave:

If you check relevant audits for CLS, you’ll see that not only our app affect this:

image
image1396×831 152 KB

image
image1225×515 45 KB

To fix this issue with our app, please try to replace the widget’s installation code with this script:

<style>
  .es-custom-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
  }

  .es-custom-loader-spinner {
    border: 4px solid #f1f1f1;
    border-top: 4px solid #598fcc;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>
<div class="es-custom-loader">
  <div class="es-custom-loader-spinner"></div>

  <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
  <div class="elfsight-app-5162195b-44cf-4fce-9ea8-4a5f68d9baab"></div>
</div>

And this code should be added to the Custom JS section on the Settings tab of your widget’s settings:

widget.on('init', () => {
  const spinner = document.querySelector(".es-custom-loader-spinner");
  spinner?.remove();
});

These codes add the loader before the widget appeared on the page and set the needed block height.

Check it out and let me know if it helped :slightly_smiling_face:

1 Like
8

Ok, thanks for the feedback, I will pass this on to my website guys.

2 Likes