fix: rive crash in New Folder/Subfolder dialogs and folder components (#1409)

Author: eeshm

apps/web/app/(org)/dashboard/caps/components/Folders.tsx

@@ -29,11 +29,19 @@ export const NormalFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -66,11 +74,19 @@ export const BlueFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -98,11 +114,19 @@ export const RedFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -130,11 +154,19 @@ export const YellowFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -177,11 +209,19 @@ export const AllFolders = React.forwardRef<FolderHandle, AllFoldersProps>(
 			() => ({
 				play: (animationName: string) => {
 					if (!rive) return;
-					rive.play(animationName);
+					try {
+						rive.play(animationName);
+					} catch (error) {
+						console.warn("Failed to play folder animation", error);
+					}
 				},
 				stop: () => {
 					if (!rive) return;
-					rive.stop();
+					try {
+						rive.stop();
+					} catch (error) {
+						console.warn("Failed to stop folder animation", error);
+					}
 				},
 			}),
 			[rive],

apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx

@@ -83,8 +83,14 @@ export const NewFolderDialog: React.FC<Props> = ({
 		src: "/rive/dashboard.riv",
 	});
 
-	useEffect(() => {
-		if (!open) setSelectedColor(null);
+	useEffect(() => { 
+			if (!open) {
+			setSelectedColor(null);
+			// Stop all animations when dialog closes
+			Object.values(folderRefs.current).forEach((ref) => {
+				ref.current?.stop();
+			});
+		}
 	}, [open]);
 
 	const folderRefs = useRef(
@@ -156,22 +162,27 @@ export const NewFolderDialog: React.FC<Props> = ({
 										setSelectedColor(option.value);
 									}}
 									onMouseEnter={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-open");
 									}}
 									onMouseLeave={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-close");
 									}}
 								>
-									{option.component(
+									{riveFile && option.component(
 										riveFile as RiveFile,
 										folderRefs.current[option.value],
 									)}
+									{!riveFile && (
+										<div className="w-[50px] h-[50px] bg-gray-4 rounded animate-pulse" />
+									)}
 									<p className="text-xs text-gray-10">{option.label}</p>
 								</div>
 							);

apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx

@@ -91,6 +91,10 @@ export const SubfolderDialog: React.FC<Props> = ({
 		if (!open) {
 			setSelectedColor(null);
 			setFolderName("");
+			// Stop any running animations when the dialog closes
+			Object.values(folderRefs.current).forEach((ref) => {
+				ref.current?.stop();
+			});
 		}
 	}, [open]);
 
@@ -163,21 +167,26 @@ export const SubfolderDialog: React.FC<Props> = ({
 										setSelectedColor(option.value);
 									}}
 									onMouseEnter={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-open");
 									}}
 									onMouseLeave={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-close");
 									}}
 								>
-									{option.component(
+									{riveFile && option.component(
 										riveFile as RiveFile,
 										folderRefs.current[option.value],
+										)}
+									{!riveFile && (
+										<div className="w-[50px] h-[50px] rounded bg-gray-4 animate-pulse" />
 									)}
 									<p className="text-xs text-gray-10">{option.label}</p>
 								</div>