chore: add startTransition to links

web/src/components/MemoRelationListView.tsx

@@ -44,6 +44,7 @@ const MemoRelationListView = (props: Props) => {
                 <Link
                   className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
                   to={`/m/${memo.id}`}
+                  unstable_viewTransition
                 >
                   <Tooltip title="Reference" placement="top">
                     <Icon.Link className="w-4 h-auto shrink-0 opacity-70" />
@@ -64,6 +65,7 @@ const MemoRelationListView = (props: Props) => {
                 <Link
                   className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
                   to={`/m/${memo.id}`}
+                  unstable_viewTransition
                 >
                   <Tooltip title="Backlink" placement="top">
                     <Icon.Milestone className="w-4 h-auto shrink-0 opacity-70" />

web/src/components/MemoView.tsx

@@ -218,7 +218,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
         <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
           {props.showCreator && creator && (
             <>
-              <Link to={`/u/${encodeURIComponent(extractUsernameFromName(memo.creator))}`}>
+              <Link to={`/u/${encodeURIComponent(extractUsernameFromName(memo.creator))}`} unstable_viewTransition>
                 <Tooltip title={"Creator"} placement="top">
                   <span className="flex flex-row justify-start items-center">
                     <UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator.avatarUrl} />
@@ -244,7 +244,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           )}
           <div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
             <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
-            <Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
+            <Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`} unstable_viewTransition>
               <Tooltip title={"Identifier"} placement="top">
                 <span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
               </Tooltip>
@@ -309,6 +309,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           <Link
             className="px-2 py-0.5 border rounded-full max-w-xs w-auto text-xs flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
             to={`/m/${parentMemo.id}`}
+            unstable_viewTransition
           >
             <Icon.ArrowUpRightFromCircle className="w-3 h-auto shrink-0 opacity-60" />
             <span className="mx-1 opacity-60">#{parentMemo.id}</span>

web/src/components/Settings/SSOSection.tsx

@@ -110,7 +110,11 @@ const SSOSection = () => {
         <p className="text-sm">{t("common.learn-more")}:</p>
         <List component="ul" marker="disc" size="sm">
           <ListItem>
-            <Link className="text-sm text-blue-600 hover:underline" to="https://www.usememos.com/docs/advanced-settings/keycloak">
+            <Link
+              className="text-sm text-blue-600 hover:underline"
+              to="https://www.usememos.com/docs/advanced-settings/keycloak"
+              target="_blank"
+            >
               Configuring Keycloak for Authentication
             </Link>
           </ListItem>

web/src/components/Settings/StorageSection.tsx

@@ -134,12 +134,20 @@ const StorageSection = () => {
         <p className="text-sm">{t("common.learn-more")}:</p>
         <List component="ul" marker="disc" size="sm">
           <ListItem>
-            <Link className="text-sm text-blue-600 hover:underline" to="https://www.usememos.com/docs/advanced-settings/local-storage">
+            <Link
+              className="text-sm text-blue-600 hover:underline"
+              to="https://www.usememos.com/docs/advanced-settings/local-storage"
+              target="_blank"
+            >
               Docs - Local storage
             </Link>
           </ListItem>
           <ListItem>
-            <Link className="text-sm text-blue-600 hover:underline" to="https://www.usememos.com/blog/choosing-a-storage-for-your-resource">
+            <Link
+              className="text-sm text-blue-600 hover:underline"
+              to="https://www.usememos.com/blog/choosing-a-storage-for-your-resource"
+              target="_blank"
+            >
               Choosing a Storage for Your Resource: Database, S3 or Local Storage?
             </Link>
           </ListItem>

web/src/pages/MemoDetail.tsx

@@ -119,6 +119,7 @@ const MemoDetail = () => {
               <Link
                 className="px-3 py-1 border rounded-full max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
                 to={`/m/${parentMemo.id}`}
+                unstable_viewTransition
               >
                 <Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
                 <span className="mx-1 opacity-60">#{parentMemo.id}</span>
@@ -138,7 +139,7 @@ const MemoDetail = () => {
                 <span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
               </Tooltip>
               <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
-              <Link to={`/u/${encodeURIComponent(memo.creator)}`}>
+              <Link to={`/u/${encodeURIComponent(memo.creator)}`} unstable_viewTransition>
                 <Tooltip title={"Creator"} placement="top">
                   <span className="flex flex-row justify-start items-center">
                     <UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator?.avatarUrl} />

web/src/pages/SignIn.tsx

@@ -160,7 +160,7 @@ const SignIn = () => {
             {systemStatus.allowSignUp && (
               <p className="w-full mt-4 text-sm">
                 <span className="dark:text-gray-500">{t("auth.sign-up-tip")}</span>
-                <Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline">
+                <Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline" unstable_viewTransition>
                   {t("common.sign-up")}
                 </Link>
               </p>

web/src/pages/SignUp.tsx

@@ -122,7 +122,7 @@ const SignUp = () => {
         {!systemStatus.host && <p className="w-full mt-4 text-sm font-medium dark:text-gray-500">{t("auth.host-tip")}</p>}
         <p className="w-full mt-4 text-sm">
           <span className="dark:text-gray-500">{t("auth.sign-in-tip")}</span>
-          <Link to="/auth" className="cursor-pointer ml-2 text-blue-600 hover:underline">
+          <Link to="/auth" className="cursor-pointer ml-2 text-blue-600 hover:underline" unstable_viewTransition>
             {t("common.sign-in")}
           </Link>
         </p>