search

klaro-org / klaro-js

Klaro Privacy Manager. An open-source, privacy-friendly & compliant consent manager for your website.
https://klaro.org
Other
1.17k stars 249 forks source link

Custom styles without delay before styles load #484

Closed matt-dalton closed 3 months ago

matt-dalton commented 9 months ago

I have tried to add custom styles to our modal by following the guidance here. It works fine, however there is a 1-2s delay where you see the original modal before the new styles load. This looks pretty unprofessional.

Klaro Config N/A

HTML Code of Page


<script defer type="text/javascript" src="https://cdn.kiprotect.com/klaro/v0.7.9/klaro.js" data-style-prefix="my-custom-styles"></script>
<link rel="stylesheet" href="https://my-website.com/styles/new-custom-styles.css" />

Steps to reproduce

Load some custom styles using the html links above. Preview the new cookie modal using google tag manager.

Current behavior

It shows the old styles for a short while before loading the new custom styles

Expected behavior

Is there a way we can delay loading the banner until the styles are loaded? This would make the whole experience more professional

dbachmann commented 7 months ago

Why don't you just create a copy of the original stylesheet and use this instead? Then there won't be stylesheet that needs to be overridden.

adewes commented 3 months ago

CSS loads synchronously by default so if you switch the order of the styles and Klaro it will ensure the styles are loaded before the notice is shown.