Performance optimizations and scroll and jump fixes

src/app/components/DefaultErrorPage.tsx

@@ -1,7 +1,6 @@
 import { Box, Button, Dialog, Icon, Icons, Text, color, config } from 'folds';
 import * as Sentry from '@sentry/react';
 import { SplashScreen } from '$components/splash-screen';
-import { buildGitHubUrl } from '$features/bug-report/BugReportModal';
 
 type ErrorPageProps = {
   error: Error;
@@ -25,7 +24,9 @@ ${error.message}
 ${stacktrace}
 \`\`\``;
 
-  return buildGitHubUrl('bug', `Error: ${error.message}`, { context: automatedBugReport });
+  const title = encodeURIComponent(`Error: ${error.message}`);
+  const body = encodeURIComponent(automatedBugReport);
+  return `https://github.com/SableClient/Sable/issues/new?template=bug_report.yml&title=${title}&description=${body}`;
 }
 
 // This component is used as the fallback for the ErrorBoundary in App.tsx, which means it will be rendered whenever an uncaught error is thrown in any of the child components and not handled locally.

src/app/components/RoomNotificationSwitcher.test.tsx

@@ -56,7 +56,7 @@ describe('RoomNotificationModeSwitcher', () => {
       RoomNotificationMode.SpecialMessages,
       RoomNotificationMode.Unset
     );
-  });
+  }, 15000);
 
   it('disables interaction while the room mode is changing', () => {
     modeStateStatus.current = 'loading';

src/app/components/SwipeableChatWrapper.tsx

@@ -1,10 +1,13 @@
-import type { ReactNode } from 'react';
-import { motion, useMotionValue, useSpring } from 'framer-motion';
-import { useDrag } from '@use-gesture/react';
+import { lazy, Suspense, type ReactNode } from 'react';
 import { useAtomValue } from 'jotai';
-import { settingsAtom, RightSwipeAction } from '$state/settings';
+import { settingsAtom } from '$state/settings';
 import { mobileOrTablet } from '$utils/user-agent';
 
+const SwipeableChatWrapperActive = lazy(async () => {
+  const mod = await import('./SwipeableChatWrapperActive');
+  return { default: mod.SwipeableChatWrapperActive };
+});
+
 interface SwipeableChatWrapperProps {
   children: ReactNode;
   onOpenSidebar?: () => void;
@@ -19,94 +22,35 @@ export function SwipeableChatWrapper({
   onReply,
 }: SwipeableChatWrapperProps) {
   const settings = useAtomValue(settingsAtom);
-  const x = useMotionValue(0);
-  const springX = useSpring(x, { stiffness: 400, damping: 40 });
-
-  const bind = useDrag(
-    ({ active, movement: [mx], velocity: [vx], direction: [dx], event: e }) => {
-      if (e && 'target' in e && e.target instanceof HTMLElement) {
-        if (e.target.closest('[data-gestures="ignore"]')) {
-          return;
-        }
-      }
-
-      if (!settings.mobileGestures || !mobileOrTablet()) return;
-
-      let val = mx;
-
-      const canSwipeRight = !!onOpenSidebar;
-      const canSwipeLeft =
-        settings.rightSwipeAction === RightSwipeAction.Members ? !!onOpenMembers : !!onReply;
-
-      if (!canSwipeRight && val > 0) val = 0;
-      if (!canSwipeLeft && val < 0) val = 0;
 
-      if (active) {
-        x.set(val);
-      } else {
-        const swipeThreshold = 120;
-        const velocityThreshold = 0.5;
-
-        if (val > swipeThreshold || (vx > velocityThreshold && dx > 0 && val > 0)) {
-          onOpenSidebar?.();
-        } else if (val < -swipeThreshold || (vx > velocityThreshold && dx < 0 && val < 0)) {
-          if (settings.rightSwipeAction === RightSwipeAction.Members) {
-            onOpenMembers?.();
-          } else {
-            onReply?.();
-          }
-        }
-        x.set(0);
-      }
-    },
-    {
-      axis: 'x',
-      bounds: { left: -200, right: 200 },
-      rubberband: true,
-      filterTaps: true,
-    }
-  );
-
-  if (!settings.mobileGestures || !mobileOrTablet()) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flexGrow: 1,
-          height: '100%',
-          width: '100%',
-        }}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  return (
+  const plainWrapper = (
     <div
-      {...bind()}
       style={{
-        touchAction: 'pan-y',
-        overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
         height: '100%',
         width: '100%',
       }}
     >
-      <motion.div
-        style={{
-          x: springX,
-          display: 'flex',
-          flexDirection: 'column',
-          flexGrow: 1,
-          height: '100%',
-        }}
+      {children}
+    </div>
+  );
+
+  if (!settings.mobileGestures || !mobileOrTablet()) {
+    return plainWrapper;
+  }
+
+  return (
+    <Suspense fallback={plainWrapper}>
+      <SwipeableChatWrapperActive
+        settings={settings}
+        onOpenSidebar={onOpenSidebar}
+        onOpenMembers={onOpenMembers}
+        onReply={onReply}
       >
         {children}
-      </motion.div>
-    </div>
+      </SwipeableChatWrapperActive>
+    </Suspense>
   );
 }

src/app/components/SwipeableChatWrapperActive.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react';
+import { motion, useMotionValue, useSpring } from 'framer-motion';
+import { useDrag } from '@use-gesture/react';
+import { RightSwipeAction, type Settings } from '$state/settings';
+
+interface SwipeableChatWrapperActiveProps {
+  children: ReactNode;
+  settings: Settings;
+  onOpenSidebar?: () => void;
+  onOpenMembers?: () => void;
+  onReply?: () => void;
+}
+
+export function SwipeableChatWrapperActive({
+  children,
+  settings,
+  onOpenSidebar,
+  onOpenMembers,
+  onReply,
+}: SwipeableChatWrapperActiveProps) {
+  const x = useMotionValue(0);
+  const springX = useSpring(x, { stiffness: 400, damping: 40 });
+
+  const bind = useDrag(
+    ({ active, movement: [mx], velocity: [vx], direction: [dx], event: e }) => {
+      if (e && 'target' in e && e.target instanceof HTMLElement) {
+        if (e.target.closest('[data-gestures="ignore"]')) {
+          return;
+        }
+      }
+
+      let val = mx;
+
+      const canSwipeRight = !!onOpenSidebar;
+      const canSwipeLeft =
+        settings.rightSwipeAction === RightSwipeAction.Members ? !!onOpenMembers : !!onReply;
+
+      if (!canSwipeRight && val > 0) val = 0;
+      if (!canSwipeLeft && val < 0) val = 0;
+
+      if (active) {
+        x.set(val);
+      } else {
+        const swipeThreshold = 120;
+        const velocityThreshold = 0.5;
+
+        if (val > swipeThreshold || (vx > velocityThreshold && dx > 0 && val > 0)) {
+          onOpenSidebar?.();
+        } else if (val < -swipeThreshold || (vx > velocityThreshold && dx < 0 && val < 0)) {
+          if (settings.rightSwipeAction === RightSwipeAction.Members) {
+            onOpenMembers?.();
+          } else {
+            onReply?.();
+          }
+        }
+        x.set(0);
+      }
+    },
+    {
+      axis: 'x',
+      bounds: { left: -200, right: 200 },
+      rubberband: true,
+      filterTaps: true,
+    }
+  );
+
+  return (
+    <div
+      {...bind()}
+      style={{
+        touchAction: 'pan-y',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <motion.div
+        style={{
+          x: springX,
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          height: '100%',
+        }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}

src/app/components/SwipeableMessageWrapper.tsx

@@ -1,70 +1,12 @@
-import { useMotionValue, useSpring, useTransform, motion } from 'framer-motion';
-import { useDrag } from '@use-gesture/react';
-import type { ReactNode } from 'react';
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, type ReactNode } from 'react';
 import { useAtomValue } from 'jotai';
-import { config, Icon, Icons } from 'folds';
 import { mobileOrTablet } from '$utils/user-agent';
 import { RightSwipeAction, settingsAtom } from '$state/settings';
 
-function ActiveSwipeWrapper({ children, onReply }: { children: ReactNode; onReply: () => void }) {
-  const x = useMotionValue(0);
-  const springX = useSpring(x, { stiffness: 300, damping: 35 });
-  const [isReady, setIsReady] = useState(false);
-  const iconOpacity = useTransform(x, [0, -8], [0, 1]);
-
-  const bind = useDrag(
-    ({ active, movement: [mx] }) => {
-      if (active) {
-        const val = mx < 0 ? mx : 0;
-        x.set(Math.max(-80, val));
-        if (mx < -50 !== isReady) setIsReady(mx < -50);
-      } else {
-        if (mx < -50) onReply();
-        x.set(0);
-        setIsReady(false);
-      }
-    },
-    {
-      axis: 'x',
-      bounds: { right: 0 },
-      rubberband: true,
-      filterTaps: true,
-      eventOptions: { passive: true },
-    }
-  );
-
-  return (
-    <div {...bind()} style={{ position: 'relative', touchAction: 'pan-y' }}>
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          right: 0,
-          paddingRight: config.space.S400,
-          display: 'flex',
-          alignItems: 'center',
-          zIndex: 0,
-        }}
-      >
-        <motion.div style={{ opacity: iconOpacity }}>
-          <Icon
-            src={Icons.ReplyArrow}
-            size="400"
-            style={{
-              color: isReady
-                ? 'var(--sable-surface-on-container)'
-                : 'var(--sable-surface-container)',
-              transition: 'color 0.2s',
-            }}
-          />
-        </motion.div>
-      </div>
-      <motion.div style={{ x: springX, position: 'relative', zIndex: 1 }}>{children}</motion.div>
-    </div>
-  );
-}
+const SwipeableMessageWrapperActive = lazy(async () => {
+  const mod = await import('./SwipeableMessageWrapperActive');
+  return { default: mod.SwipeableMessageWrapperActive };
+});
 
 export function SwipeableMessageWrapper({
   children,
@@ -75,17 +17,18 @@ export function SwipeableMessageWrapper({
 }) {
   const settings = useAtomValue(settingsAtom);
 
-  const isSwipeToReplyEnabled = useMemo(
-    () =>
-      settings.mobileGestures &&
-      mobileOrTablet() &&
-      settings.rightSwipeAction !== RightSwipeAction.Members,
-    [settings.mobileGestures, settings.rightSwipeAction]
-  );
+  const isSwipeToReplyEnabled =
+    settings.mobileGestures &&
+    mobileOrTablet() &&
+    settings.rightSwipeAction !== RightSwipeAction.Members;
 
   if (!isSwipeToReplyEnabled) {
     return children;
   }
 
-  return <ActiveSwipeWrapper onReply={onReply}>{children}</ActiveSwipeWrapper>;
+  return (
+    <Suspense fallback={children}>
+      <SwipeableMessageWrapperActive onReply={onReply}>{children}</SwipeableMessageWrapperActive>
+    </Suspense>
+  );
 }