diff --git a/app/components/Embeddable.tsx b/app/components/Embeddable.tsx
index 02a221b..dee08a4 100644
--- a/app/components/Embeddable.tsx
+++ b/app/components/Embeddable.tsx
@@ -33,12 +33,7 @@ const createClientContext = (theme?: string): Record<string, string> => {
  */
 const LoadingOverlay = ({ className }: { className?: string }) => {
   return (
-    <div
-      className={cn(
-        embeddable.loadingOverlay,
-        className
-      )}
-    >
+    <div className={cn(embeddable.loadingOverlay, className)}>
       <div className="embeddable-spinner" />
       <div>Loading your dashboard</div>
     </div>
@@ -53,6 +48,7 @@ export default function Embeddable({
 }: EmbeddableProps) {
   const [isScriptLoaded, scriptError] = useEmbeddableScriptTag();
   const [loadedEmbiddableKey, setLoadedEmbiddableKey] = useState<string>("");
+  const [loading, setLoading] = useState(true);
   const [token, tokenError, tokenLoading] = useGetToken(
     customCanvasState,
     userEmail,
@@ -69,18 +65,25 @@ export default function Embeddable({
   const handleComponentsLoad = useCallback(() => {
     setLoadedEmbiddableKey(embeddableInstanceKey);
   }, [embeddableInstanceKey]);
+  const handlecustomCanvasReady = useCallback(() => {
+    setLoading(false);
+  }, []);
 
   useEffect(() => {
     const element = ref.current;
     if (element) {
       element.addEventListener("componentsLoad", handleComponentsLoad);
+      element.addEventListener("customCanvasReady", handlecustomCanvasReady);
 
       return () => {
         element.removeEventListener("componentsLoad", handleComponentsLoad);
+        element.removeEventListener(
+          "customCanvasReady",
+          handlecustomCanvasReady
+        );
       };
     }
-  }, [handleComponentsLoad]);
-
+  }, [handleComponentsLoad, handlecustomCanvasReady]);
   if (!token) {
     return (
       <div className="relative">
@@ -104,7 +107,7 @@ export default function Embeddable({
       {/* Loading overlay - shown when components are not loaded */}
       <LoadingOverlay
         className={
-          areComponentsLoaded || !tokenLoading || isScriptLoaded
+          areComponentsLoaded || !tokenLoading || isScriptLoaded || !loading
             ? "hidden"
             : "flex"
         }