I discovered that firefox gets stuck in a request loop when the loader in the requested route takes > 1 Sec. and an ErrorBoundary is exported. But this happens only on the second reload of the page.
Chrome seems to not show this behavior.
To reproduce you could just create a simple remix app with create-remix and replace the index page with this:
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
export async function loader() {
var x:any = undefined;
const timeout = (ms: number) => {
return new Promise(resolve => setTimeout(resolve, ms));
}
await timeout(1101);
const g = x.nothing;
return json("data")
}
export function ErrorBoundary({ error }: { error: Error }) {
return (
<div>
<h1>Error</h1>
<p>{error.message}</p>
<p>The stack trace is:</p>
<pre>{error.stack}</pre>
</div>
);
}
export default function Index() {
const data = useLoaderData();
return (data);
}
If you remove the ErrorBoundary and open a new page and reload it the loop doesn't happen.
Am I doing something wrong or is this a bug?