From 2ee4d7d745d53220331e98ddb806e17dfc713c57 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 23 Dec 2023 08:55:43 +0800
Subject: [PATCH] chore: add startTransition to links

---
 web/src/components/MemoRelationListView.tsx    |  2 ++
 web/src/components/MemoView.tsx                |  5 +++--
 web/src/components/Settings/SSOSection.tsx     |  6 +++++-
 web/src/components/Settings/StorageSection.tsx | 12 ++++++++++--
 web/src/pages/MemoDetail.tsx                   |  3 ++-
 web/src/pages/SignIn.tsx                       |  2 +-
 web/src/pages/SignUp.tsx                       |  2 +-
 7 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/web/src/components/MemoRelationListView.tsx b/web/src/components/MemoRelationListView.tsx
index bd539881..a9f7c965 100644
--- a/web/src/components/MemoRelationListView.tsx
+++ b/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" />
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index c9a12915..a23a100c 100644
--- a/web/src/components/MemoView.tsx
+++ b/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>
diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
index 5c67b34f..d55aa53b 100644
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/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>
diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx
index 80ebc900..b3f1ed76 100644
--- a/web/src/components/Settings/StorageSection.tsx
+++ b/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>
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index ba2a8e23..59f23441 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/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} />
diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx
index aee729db..fb295472 100644
--- a/web/src/pages/SignIn.tsx
+++ b/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>
diff --git a/web/src/pages/SignUp.tsx b/web/src/pages/SignUp.tsx
index 731c3ac6..96b6e90f 100644
--- a/web/src/pages/SignUp.tsx
+++ b/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>