fix: add delay for CSS loading to ensure floating button styles are applied

- Added 100ms delay when CSS needs to be loaded for floating button
- This ensures CSS rules are parsed before button is displayed
- Fixes issue where button appeared unstyled in top-left corner
This commit is contained in:
Russell Ballestrini 2025-07-10 07:00:50 -04:00
parent a1a53fcf07
commit 675b8fefd1

View file

@ -328,12 +328,14 @@ export function createFloatingAIButton() {
const hasPicoCSS = document.querySelector('link[href*="pico"]') !== null;
const cssFile = hasPicoCSS ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css';
let cssLoaded = false;
if (!document.querySelector(`link[href*="${cssFile}"]`)) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `https://uncloseai.com/src/${cssFile}`;
document.head.appendChild(link);
console.log(`uncloseai.js: Loaded ${cssFile} for floating button styles.`);
cssLoaded = true;
}
// Remove any existing floating button first
@ -388,8 +390,16 @@ export function createFloatingAIButton() {
// Set up self-contained click handler
setupFloatingButtonHandler(floatingButton);
document.body.appendChild(floatingButton);
console.log("uncloseai.js: Appended floating button to document.body.");
// If we just loaded CSS, wait a bit before showing button
if (cssLoaded) {
setTimeout(() => {
document.body.appendChild(floatingButton);
console.log("uncloseai.js: Appended floating button to document.body after CSS load delay.");
}, 100);
} else {
document.body.appendChild(floatingButton);
console.log("uncloseai.js: Appended floating button to document.body.");
}
}
// Set up click handler for floating button (self-contained)