fix: ui improvements

fluid-design-io · Oct 24, 2023 · 021cf91 · 021cf91
1 parent e606cf1
commit 021cf91
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/apps/web/components/toolbar/shareable-link.tsx b/apps/web/components/toolbar/shareable-link.tsx
@@ -5,14 +5,14 @@ import {
   PopoverTrigger,
 } from "@ui/components/ui/popover";
 
-import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button";
 import primaryToolbarMenu from "../ui/primary-toolbar-menu";
 import { useEffect, useState } from "react";
 import { useColorStore } from "@/store/store";
 import { colorHelper } from "@/lib/colorHelper";
 import dynamic from "next/dynamic";
 import { Skeleton } from "ui/components/ui/skeleton";
 import ToolbarMenuItem from "./toolbar-menu-item";
+import { AnimatePresence } from "framer-motion";
 
 const ShareableLinkPlugin = dynamic(
   () => import("@/components/toolbar/plugin/shareable-link.plugin"),
@@ -41,7 +41,15 @@ function ToolbarShareableLink() {
         <ToolbarMenuItem {...menuItem} />
       </PopoverTrigger>
       <PopoverContent className="w-[18rem] sm:w-[24rem]" align="end">
-        {open && <ShareableLinkPlugin colors={colors} setOpen={setOpen} />}
+        <AnimatePresence mode="wait">
+          {open && (
+            <ShareableLinkPlugin
+              key={`shareable-${open}`}
+              colors={colors}
+              setOpen={setOpen}
+            />
+          )}
+        </AnimatePresence>
       </PopoverContent>
     </Popover>
   );