AppShell Suspense error

[uglyDrusLee]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.6.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

AppShell has useResizing, which leads to rerendering, due to setState inside useIsomorphicEffect. Because of this behavior - when hydrating, react throws an error "Uncaught Error: This Suspense boundary received an update before it finished hydrating".

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

Consider wrapping setState inside startTransition, or at least provide an option to disable useResizing. This could be particularly useful when transitionDuration is set to 0.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Please provide a repository with a minimal reproduction.

[uglyDrusLee]

https://github.com/uglyDrusLee/drusMantineAppShellIssue/tree/main/
here's minimal reproduction. to start, just "npm run start". server will be started on 3000 port.

[rtivital]

The issue is not related to use-resizing. If the code is chaged to

import { startTransition, useRef, useState } from 'react';
import { useIsomorphicEffect, useWindowEvent } from '@mantine/hooks';

interface UseResizingInput {
  transitionDuration: number | undefined;
  disabled: boolean | undefined;
}

export function useResizing({ transitionDuration, disabled }: UseResizingInput) {
  const [resizing, setResizing] = useState(true);
  const resizingTimeout = useRef<number>();
  const disabledTimeout = useRef<number>();

  useWindowEvent('resize', () => {
    setResizing(true);
    clearTimeout(resizingTimeout.current);
    resizingTimeout.current = window.setTimeout(() => setResizing(false), 200);
  });

  useIsomorphicEffect(() => {
    startTransition(() => {
      setResizing(true);
      clearTimeout(disabledTimeout.current);
      disabledTimeout.current = window.setTimeout(
        () => setResizing(false),
        transitionDuration || 0
      );
    });
  }, [disabled, transitionDuration]);

  return resizing;
}

Or resizing removed entirely, it does not fix the error message.

You are welcome to research the issue and propose the fix.

[uglyDrusLee]

your solution works fine for me, error is gone. maybe you faced vite's cache? to get rid of it you can just delete ".vite" folder inside node_modules, restart "npm run start". dont know how exactly you tested with my repo. i just manually edit useResizing inside node_modules and error is gone.

[rtivital]

All right, then I'll just add this solution in next patch

[uglyDrusLee]

thank you very much

[rtivital]

Fixed in 7.1.1

[RabeeAbuBaker]

Getting this error again on v7.13.0

Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

Using Suspense outside of the AppShell doesn't trigger the error

Here's a repo to reproduce it

https://github.com/RabeeAbuBaker/remix-defer/tree/simple-defer-app-shell