Skip to content

Fix Rive crashes in New Folder/Subfolder dialogs and shared folder components (#1409) #1426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eeshm wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix Rive crashes in New Folder/Subfolder dialogs and shared folder components (#1409) #1426

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f61e710
fix: rive crash in New Folder/Subfolder dialogs and folder components…
eeshm Dec 1, 2025
645376e
chore: format files
eeshm Dec 1, 2025
47b699e
chore: remove comments
eeshm Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 50 additions & 10 deletions apps/web/app/(org)/dashboard/caps/components/Folders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -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],
Expand Down
17 changes: 14 additions & 3 deletions apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
Comment thread
eeshm marked this conversation as resolved.

const folderRefs = useRef(
Expand Down Expand Up @@ -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" />
)}
Comment thread
eeshm marked this conversation as resolved.
<p className="text-xs text-gray-10">{option.label}</p>
</div>
);
Expand Down
11 changes: 10 additions & 1 deletion apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down Expand Up @@ -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" />
)}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
<p className="text-xs text-gray-10">{option.label}</p>
</div>
Expand Down
Loading