mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-04 10:30:00 -06:00
Code Issues Packages Projects Releases 123 Wiki Activity

Merge branch 'main' of https://github.com/RajuGangitla/formbricks

Browse Source
This commit is contained in:
RajuGangitla
2024-09-06 07:40:34 +00:00
parent 7088f9bd26 780115ffb8
commit 72e023c530
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/web/app/s/[surveyId]/components/SurveyLoadingAnimation.tsx
View File

@@ -16,7 +16,7 @@ export const SurveyLoadingAnimation = ({
}: SurveyLoadingAnimationProps) => {
const [isHidden, setIsHidden] = useState(false);
const [minTimePassed, setMinTimePassed] = useState(false);
const [isMediaLoaded, setIsMediaLoaded] = useState(false); // Tracks if all media (images, iframes) are fully loaded
const [isMediaLoaded, setIsMediaLoaded] = useState(false); // Tracks if all media are fully loaded
const [isSurveyPackageLoaded, setIsSurveyPackageLoaded] = useState(false); // Tracks if the survey package has been loaded into the DOM
const isReadyToTransition = isMediaLoaded && minTimePassed && isBackgroundLoaded;
const cardId = survey.welcomeCard.enabled ? `questionCard--1` : `questionCard-0`;
@@ -25,32 +25,42 @@ export const SurveyLoadingAnimation = ({
const checkMediaLoaded = useCallback(() => {
const cardElement = document.getElementById(cardId);
const images = cardElement ? Array.from(cardElement.getElementsByTagName("img")) : [];
const iframes = cardElement ? Array.from(cardElement.getElementsByTagName("iframe")) : [];
const allImagesLoaded = images.every((img) => img.complete && img.naturalHeight !== 0);
const allIframesLoaded = iframes.every((iframe) => {
const contentWindow = iframe.contentWindow;
return contentWindow && contentWindow.document.readyState === "complete";
});
if (allImagesLoaded && allIframesLoaded) {
if (allImagesLoaded) {
setIsMediaLoaded(true);
}
}, [cardId]);
// Effect to monitor when the survey package is loaded and media elements are fully loaded
useEffect(() => {
if (!isSurveyPackageLoaded) return; // Exit early if the survey package is not yet loaded
if (!isSurveyPackageLoaded) return;
checkMediaLoaded(); // Initial check when the survey package is loaded
checkMediaLoaded();
// Add event listeners to detect when individual media elements finish loading
const mediaElements = document.querySelectorAll(`#${cardId} img, #${cardId} iframe`);
mediaElements.forEach((element) => element.addEventListener("load", checkMediaLoaded));
const handleLoad = () => checkMediaLoaded();
const handleError = () => {
console.error("Media failed to load");
setIsMediaLoaded(true);
};
mediaElements.forEach((element) => {
element.addEventListener("load", handleLoad);
element.addEventListener("error", handleError);
});
// Set a 3-second timeout to prevent infinite loading
const timeoutId = setTimeout(() => {
setIsMediaLoaded(true);
}, 3000);
return () => {
// Cleanup event listeners when the component unmounts or dependencies change
mediaElements.forEach((element) => element.removeEventListener("load", checkMediaLoaded));
mediaElements.forEach((element) => {
element.removeEventListener("load", handleLoad);
element.removeEventListener("error", handleError);
});
clearTimeout(timeoutId);
};
}, [isSurveyPackageLoaded, checkMediaLoaded, cardId]);