refactor(ui): setting view-transition names

SeanCassiere · Jul 2, 2024 · f21e83e · f21e83e
1 parent bd69513
commit f21e83e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/routers/app/layouts/app-container.tsx b/src/routers/app/layouts/app-container.tsx
@@ -31,5 +31,12 @@ const SidebarFetcher: FC<{ workspace: string }> = ({ workspace }) => {
   params.append("style_current_workspace", workspace);
 
   const getUrl = `/app/hx/sidebar-organizations?${params.toString()}`;
-  return <div hx-get={getUrl} hx-trigger="load" hx-swap="innerHTML transition:true" />;
+  return (
+    <div
+      hx-get={getUrl}
+      hx-trigger="load"
+      hx-swap="innerHTML transition:true"
+      style="view-transition-name:sidebar-organizations-list"
+    />
+  );
 };
diff --git a/src/routers/app/layouts/root-document.tsx b/src/routers/app/layouts/root-document.tsx
@@ -6,13 +6,15 @@ export const RootDocument: FC<PropsWithChildren<{ title: string }>> = ({ title,
       <head>
         <meta charset="UTF-8"></meta>
         <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
+        <meta name="view-transition" content="same-origin"></meta>
         <title>{title}</title>
         <script
           src="https://unpkg.com/[email protected]"
           integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw"
           crossorigin="anonymous"
         ></script>
         <script src="https://cdn.tailwindcss.com"></script>
+        <style>{`::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }`}</style>
       </head>
       <body class="bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50">{children}</body>
     </html>