Merge pull request #902 from The-Commit-Company/fix-animations

fix: animation timing and layout shifting

raven-app/src/components/common/UserAvatar.tsx

@@ -1,5 +1,3 @@
-import { useInView } from 'react-intersection-observer'
-import { Skeleton } from './Skeleton'
 import { Avatar, Theme } from '@radix-ui/themes'
 import { AvatarProps } from '@radix-ui/themes/dist/cjs/components/avatar'
 import { BoxProps } from '@radix-ui/themes/dist/cjs/components/box'
@@ -14,34 +12,13 @@ interface UserAvatarProps extends Partial<AvatarProps> {
     isBot?: boolean,
     skeletonSize?: BoxProps['width'] | BoxProps['height'],
 }
-const options = {
-    root: null,
-    rootMargin: "50px",
-    threshold: 0.5,
-    triggerOnce: true
-}
 
 export const getInitials = (name?: string) => {
     if (!name) return ''
     const [firstName, lastName] = name.split(' ')
     return firstName[0] + (lastName?.[0] ?? '')
 }
 
-const radixRadiusToTailwind = (radius: "none" | "small" | "medium" | "large" | "full") => {
-    switch (radius) {
-        case "none":
-            return "rounded-none"
-        case "small":
-            return "rounded-sm"
-        case "medium":
-            return "rounded-md"
-        case "large":
-            return "rounded-lg"
-        case "full":
-            return "rounded-full"
-    }
-}
-
 const getIconSize = (size: AvatarProps['size']) => {
     switch (size) {
         case '1':
@@ -69,14 +46,11 @@ const getIconSize = (size: AvatarProps['size']) => {
 }
 
 export const UserAvatar = ({ src, alt, size = '1', radius = 'medium', isActive, skeletonSize = '5', fallback, isBot, className, ...props }: UserAvatarProps) => {
-    const { ref, inView } = useInView(options)
     const color = useMemo(() => generateAvatarColor(alt), [alt])
-    return <Theme accentColor={color}><span ref={ref} className="relative inline-block">
-        {inView ?
-            <Avatar src={src} alt={alt} loading='lazy' fallback={fallback ?? getInitials(alt)} size={size} radius={radius} className={className} {...props} />
-            :
-            <Skeleton className={radixRadiusToTailwind(radius)} width={skeletonSize} height={skeletonSize} />
-        }
+    return <Theme accentColor={color}><span className="relative inline-block">
+        <Avatar src={src} alt={alt}
+            loading='lazy'
+            fallback={fallback ?? getInitials(alt)} size={size} radius={radius} className={className} {...props} />
         {isActive &&
             <span className={clsx("absolute block translate-x-1/2 translate-y-1/2 transform rounded-full", radius === 'full' ? 'bottom-1 right-1' : 'bottom-0.5 right-0.5')}>
                 <span className="block h-2 w-2 rounded-full border border-slate-2 bg-green-600 shadow-md" />

raven-app/src/components/feature/channels/ChannelList.tsx

@@ -53,7 +53,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
     }, [channels, myProfile, unread_count])
 
     const ref = useRef<HTMLDivElement>(null)
-    const [height, setHeight] = useState(ref?.current?.clientHeight ?? 0)
+    const [height, setHeight] = useState(ref?.current?.clientHeight ?? showData ? filteredChannels.length * (36) - 4 : 0)
 
     useLayoutEffect(() => {
         setHeight(ref.current?.clientHeight ?? 0)
@@ -81,7 +81,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
             <SidebarGroup>
                 <SidebarGroupList
                     style={{
-                        height: showData ? height : 0
+                        height: showData ? height : 0,
                     }}
                 >
                     <div ref={ref} className="flex gap-1 flex-col">

raven-app/src/components/feature/channels/CreateChannelModal.tsx

@@ -94,7 +94,7 @@ export const CreateChannelButton = ({ updateChannelList }: { updateChannelList:
     return <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
         <Dialog.Trigger>
             <IconButton variant='soft' size='1' radius='large' color='gray' aria-label='Create Channel' title='Create Channel'
-                className='group-hover:visible invisible transition-all ease-in-out text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3'>
+                className='group-hover:visible invisible transition-all ease-ease text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3'>
                 <FiPlus size='16' />
                 {/* <BiPlus className='text-gray-10 dark:text-gray-300' /> */}
             </IconButton>

raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx

@@ -457,7 +457,7 @@ const Tiptap = ({ slotBefore, fileProps, onMessageSend, replyMessage, clearReply
 
 
     return (
-        <Box className='border rounded-radius2 border-gray-300 dark:border-gray-500 dark:bg-gray-3 shadow-md animate-fadein'>
+        <Box className='border rounded-radius2 border-gray-300 dark:border-gray-500 dark:bg-gray-3 shadow-md'>
             <EditorContext.Provider value={{ editor }}>
                 {slotBefore}
                 <EditorContent editor={editor} />

raven-app/src/components/feature/chat/ChatStream/ChatBoxBody.tsx

@@ -1,5 +1,5 @@
 import { Message } from "../../../../../../types/Messaging/Message"
-import { Suspense, lazy, useContext, useMemo, useState } from "react"
+import { useContext, useMemo, useState } from "react"
 import { ArchivedChannelBox } from "../chat-footer/ArchivedChannelBox"
 import { ChannelListItem, DMChannelListItem } from "@/utils/channel/ChannelListProvider"
 import { JoinChannelBox } from "../chat-footer/JoinChannelBox"
@@ -9,13 +9,11 @@ import useFileUpload from "../ChatInput/FileInput/useFileUpload"
 import { CustomFile, FileDrop } from "../../file-upload/FileDrop"
 import { FileListItem } from "../../file-upload/FileListItem"
 import { useSendMessage } from "../ChatInput/useSendMessage"
-import { Loader } from "@/components/common/Loader"
 import { Flex, Box, IconButton } from "@radix-ui/themes"
 import { ReplyMessageBox } from "../ChatMessage/ReplyMessageBox/ReplyMessageBox"
 import { BiX } from "react-icons/bi"
 import ChatStream from "./ChatStream"
-
-const Tiptap = lazy(() => import("../ChatInput/Tiptap"))
+import Tiptap from "../ChatInput/Tiptap"
 
 const COOL_PLACEHOLDERS = [
     "Delivering messages atop dragons 🐉 is available on a chargeable basis.",
@@ -27,7 +25,7 @@ const COOL_PLACEHOLDERS = [
     "Want to know who writes these placeholders? 🤔. No one.",
     "Type a message..."
 ]
-const randomPlaceholder = COOL_PLACEHOLDERS[Math.floor(Math.random() * (COOL_PLACEHOLDERS.length))]
+// const randomPlaceholder = COOL_PLACEHOLDERS[Math.floor(Math.random() * (COOL_PLACEHOLDERS.length))]
 interface ChatBoxBodyProps {
     channelData: ChannelListItem | DMChannelListItem
 }
@@ -95,27 +93,25 @@ export const ChatBoxBody = ({ channelData }: ChatBoxBodyProps) => {
                 />
                 {channelData?.is_archived == 0 && (isUserInChannel || channelData?.type === 'Open')
                     &&
-                    <Suspense fallback={<Flex align='center' justify='center' width='100%' height='9'><Loader /></Flex>}>
-                        <Tiptap
-                            key={channelData.name}
-                            fileProps={{
-                                fileInputRef,
-                                addFile
-                            }}
-                            clearReplyMessage={handleCancelReply}
-                            placeholder={randomPlaceholder}
-                            replyMessage={selectedMessage}
-                            sessionStorageKey={`tiptap-${channelData.name}`}
-                            onMessageSend={sendMessage}
-                            messageSending={loading}
-                            slotBefore={<Flex direction='column' justify='center' hidden={!selectedMessage && !files.length}>
-                                {selectedMessage && <PreviousMessagePreview selectedMessage={selectedMessage} />}
-                                {files && files.length > 0 && <Flex gap='2' width='100%' align='end' px='2' p='2' wrap='wrap'>
-                                    {files.map((f: CustomFile) => <Box className="grow-0" key={f.fileID}><FileListItem file={f} uploadProgress={fileUploadProgress} removeFile={() => removeFile(f.fileID)} /></Box>)}
-                                </Flex>}
+                    <Tiptap
+                        key={channelData.name}
+                        fileProps={{
+                            fileInputRef,
+                            addFile
+                        }}
+                        clearReplyMessage={handleCancelReply}
+                        // placeholder={randomPlaceholder}
+                        replyMessage={selectedMessage}
+                        sessionStorageKey={`tiptap-${channelData.name}`}
+                        onMessageSend={sendMessage}
+                        messageSending={loading}
+                        slotBefore={<Flex direction='column' justify='center' hidden={!selectedMessage && !files.length}>
+                            {selectedMessage && <PreviousMessagePreview selectedMessage={selectedMessage} />}
+                            {files && files.length > 0 && <Flex gap='2' width='100%' align='end' px='2' p='2' wrap='wrap'>
+                                {files.map((f: CustomFile) => <Box className="grow-0" key={f.fileID}><FileListItem file={f} uploadProgress={fileUploadProgress} removeFile={() => removeFile(f.fileID)} /></Box>)}
                             </Flex>}
-                        />
-                    </Suspense>
+                        </Flex>}
+                    />
                 }
                 {channelData && !isLoading && <>
                     {channelData.is_archived == 0 && !isUserInChannel && channelData.type !== 'Open' && !isDM &&

raven-app/src/components/feature/chat/ChatStream/ChatStream.tsx

@@ -119,7 +119,7 @@ const ChatStream = ({ replyToMessage }: Props) => {
             {!isLoading && !hasOlderMessages && <ChannelHistoryFirstMessage channelID={channelID ?? ''} />}
             {isLoading && <ChatStreamLoader />}
             {error && <ErrorBanner error={error} />}
-            <div className={clsx('flex flex-col pb-4 z-50 transition-opacity duration-400 ease-in-out', isLoading ? 'opacity-0' : 'opacity-100')}>
+            <div className={clsx('flex flex-col pb-4 z-50 transition-opacity duration-400 ease-ease-out-cubic', isLoading ? 'opacity-0' : 'opacity-100')}>
                 {messages?.map(message => {
                     if (message.message_type === 'date') {
                         return <DateSeparator key={`date-${message.creation}`} id={`date-${message.creation}`} className='p-2 z-10 relative'>

raven-app/src/components/feature/direct-messages/DirectMessageList.tsx

@@ -24,7 +24,7 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
 
     const ref = useRef<HTMLDivElement>(null)
 
-    const [height, setHeight] = useState(ref?.current?.clientHeight ?? 0)
+    const [height, setHeight] = useState(ref?.current?.clientHeight ?? showData ? (dm_channels.length + extra_users.length) * (34.79) : 0)
 
     useLayoutEffect(() => {
         setHeight(ref.current?.clientHeight ?? 0)
@@ -48,7 +48,7 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
                     style={{
                         height: showData ? height : 0
                     }}>
-                    <div ref={ref} className="flex gap-1 flex-col">
+                    <div ref={ref} className="flex gap-1 flex-col fade-in">
                         <DirectMessageItemList unread_count={unread_count} />
                         {extra_users && extra_users.length ? <ExtraUsersItemList /> : null}
                     </div>

raven-app/src/components/layout/Sidebar/SidebarComp.tsx

@@ -51,7 +51,7 @@ interface SidebarGroupListProps extends FlexProps {
 export const SidebarGroupList = ({ children, ...props }: SidebarGroupListProps) => {
 
     return (
-        <Flex gap='1' direction='column' {...props} className={clsx(`transition-all ease-in-out duration-200 overflow-hidden`, props.className)}>
+        <Flex gap='1' direction='column' {...props} className={clsx(`transition-all ease-ease-out-cubic duration-200 overflow-hidden`, props.className)}>
             {children}
         </Flex>
     )
@@ -147,7 +147,7 @@ export const SidebarViewMoreButton = ({ expanded, onClick, ...props }: SidebarVi
             radius='large'
             onClick={onClick}
             {...props}
-            className={clsx('cursor-pointer transition-all text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3 invisible group-hover:visible ease-in-out')}
+            className={clsx('cursor-pointer transition-all text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3 invisible group-hover:visible ease-ease')}
         >
             {expanded ? <FiChevronDown size='16' /> : <FiChevronRight size='16' />}
         </IconButton>

raven-app/tailwind.config.js

@@ -142,7 +142,7 @@ export default {
         radius6: 'var(--radius-6)',
       },
       animation: {
-        fadein: 'fadeIn .3s ease-in',
+        fadein: 'fadeIn .25s ease-out',
       },
 
       keyframes: {
@@ -151,6 +151,32 @@ export default {
           to: { opacity: 1 },
         },
       },
+      transitionTimingFunction: {
+        // Quad is the strongest easing curve
+        // Circ is the weakest easing curve
+        'ease-in-quad': 'cubic-bezier(.55, .085, .68, .53)',
+        'ease-in-cubic': 'cubic-bezier(.55, .055, .675, .19)',
+        'ease-in-quart': 'cubic-bezier(.895, .03, .685, .22)',
+        'ease-in-quint': 'cubic-bezier(.755, .05, .855, .06)',
+        'ease-in-expo': 'cubic-bezier(.95, .05, .795, .035)',
+        'ease-in-circ': 'cubic-bezier(.6, .04, .98, .335)',
+
+        'ease-out-quad': 'cubic-bezier(.25, .46, .45, .94)',
+        'ease-out-cubic': 'cubic-bezier(.215, .61, .355, 1)',
+        'ease-out-quart': 'cubic-bezier(.165, .84, .44, 1)',
+        'ease-out-quint': 'cubic-bezier(.23, 1, .32, 1)',
+        'ease-out-expo': 'cubic-bezier(.19, 1, .22, 1)',
+        'ease-out-circ': 'cubic-bezier(.075, .82, .165, 1)',
+
+        'ease-in-out-quad': 'cubic-bezier(.455, .03, .515, .955)',
+        'ease-in-out-cubic': 'cubic-bezier(.645, .045, .355, 1)',
+        'ease-in-out-quart': 'cubic-bezier(.77, 0, .175, 1)',
+        'ease-in-out-quint': 'cubic-bezier(.86, 0, .07, 1)',
+        'ease-in-out-expo': 'cubic-bezier(1, 0, 0, 1)',
+        'ease-in-out-circ': 'cubic-bezier(.785, .135, .15, .86)',
+
+        'ease': 'cubic-bezier(0.25, 0.1, 0.25, 1)'
+      }
     },
   },
   darkMode: 'class',