UPDATE : try to improve user exprince

shyamtala003 · Apr 29, 2024 · b3d028f · b3d028f
1 parent 55a74fd
commit b3d028f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/src/components/messages/MessageElement.jsx b/src/components/messages/MessageElement.jsx
@@ -11,7 +11,8 @@ const MessageElement = ({ message }) => {
  const formattedTime = dayjs(message.createdAt).fromNow();
  const self = userId === message.senderId;
  return (
- <div className={`chat ${self ? "chat-end" : "chat-start"}`}>
+ <div
+ className={`chat ${self ? "chat-end" : "chat-start"} ${message?.shake && "animate-shake"}`}>
  <div className="chat-image avatar">
  <div className="w-8 rounded-full">
  <img

diff --git a/src/hooks/socket/useNewMessage.js b/src/hooks/socket/useNewMessage.js
@@ -8,6 +8,7 @@ const useNewMessage = () => {
 
  useEffect(() => {
  const newMessageComes = (newMessage) => {
+ newMessage = { ...newMessage, shake: true };
  setMessage(newMessage);
  return scrollDown("messageContainer");
  };

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,21 @@ export default {
  skeleton:
  "linear-gradient(105deg, transparent 0%, transparent 40%, oklch(1 0 0 / 0.17) 50%, transparent 60%, transparent 100%)",
  },
+ keyframes: {
+ shake: {
+ "0%": { transform: "translate(0, 0)" },
+ "1.78571%": { transform: "translate(5px, 0)" },
+ "3.57143%": { transform: "translate(0, 0)" },
+ "5.35714%": { transform: "translate(5px, 0)" },
+ "7.14286%": { transform: "translate(0, 0)" },
+ "8.92857%": { transform: "translate(5px, 0)" },
+ "10.71429%": { transform: "translate(0, 0)" },
+ "100%": { transform: "translate(0, 0)" },
+ },
+ },
+ animation: {
+ shake: "shake 4s ease-in-out", // Play animation once and stop at the end
+ },
  },
  },