Various UI tweaks

frontend/app/src/anim-utils.ts

@@ -0,0 +1,22 @@
+import { sleep } from "@/src/utils";
+import { useTransition } from "@react-spring/web";
+import { useState } from "react";
+
+export function useFlashTransition(duration: number = 500) {
+  const [show, setShow] = useState(false);
+  return {
+    flash: () => setShow(true),
+    transition: useTransition(show, {
+      from: { opacity: 0, transform: "scale(0.9)" },
+      enter: () => async (next) => {
+        await next({ opacity: 1, transform: "scale(1)" });
+        setShow(false);
+      },
+      leave: () => async (next) => {
+        await sleep(duration);
+        await next({ opacity: 0, transform: "scale(1)" });
+      },
+      config: { mass: 1, tension: 2000, friction: 80 },
+    }),
+  };
+}

frontend/app/src/comps/About/About.tsx

@@ -3,13 +3,14 @@
 import type { Entries } from "@/src/types";
 import type { ReactNode } from "react";
 
+import { useFlashTransition } from "@/src/anim-utils";
 import { Logo } from "@/src/comps/Logo/Logo";
 import * as env from "@/src/env";
 import { css } from "@/styled-system/css";
 import { AnchorTextButton, Button, Modal } from "@liquity2/uikit";
-import { a, useSpring, useTransition } from "@react-spring/web";
+import { a, useSpring } from "@react-spring/web";
 import { useQuery } from "@tanstack/react-query";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useState } from "react";
 
 const ENV_EXCLUDE: (keyof typeof env)[] = [
   "CollateralSymbolSchema",
@@ -113,7 +114,7 @@ const envGroups = getEnvGroups();
 export function About({ children }: { children: ReactNode }) {
   const contractsHash = useContractsHash(envGroups);
   const [visible, setVisible] = useState(false);
-  const notifyCopy = useNotifyCopy();
+  const copyTransition = useFlashTransition();
   return (
     <AboutContext.Provider
       value={{
@@ -136,7 +137,7 @@ export function About({ children }: { children: ReactNode }) {
             flexDirection: "column",
             gap: 32,
             width: "100%",
-            paddingTop: 32,
+            padding: "32px 0 8px",
             "& section": {
               display: "flex",
               flexDirection: "column",
@@ -146,13 +147,13 @@ export function About({ children }: { children: ReactNode }) {
           })}
         >
           <section>
-            <h2
+            <h1
               className={css({
                 fontSize: 20,
               })}
             >
               About this version
-            </h2>
+            </h1>
             <AboutTable
               entries={{
                 "Release": (
@@ -182,20 +183,20 @@ export function About({ children }: { children: ReactNode }) {
                 gap: 8,
               })}
             >
-              <h2
+              <h1
                 className={css({
                   fontSize: 20,
                 })}
               >
                 Build environment
-              </h2>
+              </h1>
               <div
                 className={css({
                   display: "flex",
                   gap: 8,
                 })}
               >
-                {notifyCopy.transition((style, item) => (
+                {copyTransition.transition((style, item) => (
                   item && (
                     <a.div
                       className={css({
@@ -223,7 +224,7 @@ export function About({ children }: { children: ReactNode }) {
                   label="Copy to clipboard"
                   onClick={() => {
                     navigator.clipboard.writeText(JSON.stringify(envGroups, null, 2));
-                    notifyCopy.notify();
+                    copyTransition.flash();
                   }}
                 />
               </div>
@@ -380,35 +381,3 @@ function AboutTable({
     </div>
   );
 }
-
-function useNotifyCopy() {
-  const [notifyCopy, setNotifyCopy] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
-
-  const notify = useCallback(() => {
-    clearTimeout(timeoutRef.current);
-    setNotifyCopy(true);
-    timeoutRef.current = setTimeout(() => {
-      setNotifyCopy(false);
-    }, 500);
-  }, []);
-
-  const transition = useTransition(notifyCopy, {
-    from: { opacity: 0, transform: "scale(0.9)" },
-    enter: { opacity: 1, transform: "scale(1)" },
-    leave: { opacity: 0, transform: "scale(1)" },
-    config: {
-      mass: 1,
-      tension: 2000,
-      friction: 80,
-    },
-  });
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(timeoutRef.current);
-    };
-  }, []);
-
-  return { notify, transition };
-}

frontend/app/src/screens/LoanScreen/LoanScreenCard.tsx

@@ -3,6 +3,7 @@ import type { CollateralToken } from "@liquity2/uikit";
 import type { ReactNode } from "react";
 import type { LoanLoadingState } from "./LoanScreen";
 
+import { useFlashTransition } from "@/src/anim-utils";
 import { INFINITY } from "@/src/characters";
 import { ScreenCard } from "@/src/comps/Screen/ScreenCard";
 import { LoanStatusTag } from "@/src/comps/Tag/LoanStatusTag";
@@ -34,7 +35,6 @@ import { a, useTransition } from "@react-spring/web";
 import { blo } from "blo";
 import * as dn from "dnum";
 import Image from "next/image";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { match, P } from "ts-pattern";
 
 type LoanMode = "borrow" | "leverage";
@@ -335,7 +335,7 @@ function LoanCard({
   nftUrl: string | null;
   onLeverageModeChange: (mode: LoanMode) => void;
 }) {
-  const notifyCopy = useNotifyCopy();
+  const copyTransition = useFlashTransition();
 
   const cardTransition = useTransition(props, {
     keys: (props) => props.mode,
@@ -451,7 +451,7 @@ function LoanCard({
                       right: 16,
                     })}
                   >
-                    {notifyCopy.transition((style, show) => (
+                    {copyTransition.transition((style, show) => (
                       show && (
                         <a.div
                           className={css({
@@ -581,7 +581,7 @@ function LoanCard({
                         }
                         if (index === 1) {
                           navigator.clipboard.writeText(window.location.href);
-                          notifyCopy.notify();
+                          copyTransition.flash();
                         }
                         if (index === 2) {
                           window.open(`${CHAIN_BLOCK_EXPLORER?.url}address/${loan.borrower}`);
@@ -822,35 +822,3 @@ function LoanCard({
     </div>
   );
 }
-
-function useNotifyCopy() {
-  const [notifyCopy, setNotifyCopy] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
-
-  const notify = useCallback(() => {
-    clearTimeout(timeoutRef.current);
-    setNotifyCopy(true);
-    timeoutRef.current = setTimeout(() => {
-      setNotifyCopy(false);
-    }, 500);
-  }, []);
-
-  const transition = useTransition(notifyCopy, {
-    from: { opacity: 0, transform: "scale(0.9)" },
-    enter: { opacity: 1, transform: "scale(1)" },
-    leave: { opacity: 0, transform: "scale(1)" },
-    config: {
-      mass: 1,
-      tension: 2000,
-      friction: 80,
-    },
-  });
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(timeoutRef.current);
-    };
-  }, []);
-
-  return { notify, transition };
-}

frontend/app/src/screens/TransactionsScreen/LoanCard.tsx

@@ -87,7 +87,7 @@ export function LoanCard({
       height={isLoanClosing ? LOAN_CARD_HEIGHT_REDUCED : LOAN_CARD_HEIGHT}
       leverage={leverageMode}
       loadingState={loadingState === "success"
-        ? collPriceUsd.status === "pending" || !loanDetailsFilled
+        ? collPriceUsd.status === "pending" || (!isLoanClosing && !loanDetailsFilled)
           ? "loading"
           : collPriceUsd.status
         : loadingState}