feat: add loading skeletons to team chat (NSOC'26)

[SrashtiChauhan]

NSOC'26

Overview

This PR improves the Team Chat loading experience by adding animated skeleton placeholders while chat messages are being fetched.

The update provides a smoother and more polished UI experience by reducing blank loading states.

---

Related Issue

Closes #78

---

Improvements Made

Loading Skeleton UI

• Added animated loading skeletons for chat messages
• Added placeholder message bubbles during initial fetch
• Improved perceived loading performance

UX Improvements

• Reduced blank screen appearance while loading messages
• Improved visual consistency with existing chat UI
• Preserved existing realtime functionality

Technical Improvements

• Added loading state management
• Added conditional rendering for skeleton UI
• Used Tailwind animate-pulse utility for smooth animations

---

Tech Stack

• Next.js
• React
• Tailwind CSS

---

Tested

• Initial chat loading state
• Skeleton rendering behavior
• Message rendering after fetch completion
• Existing realtime messaging flow
• Responsive layout behavior

---

Preview

• Animated chat loading skeletons
• Improved loading experience

Screenshot

[vercel]

@SrashtiChauhan is attempting to deploy a commit to the shreemp194-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thank you for opening this pull request! I will review your changes and assist you soon.

[SrashtiChauhan]

hi @Shriii19 ,
Kindly review my pr.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flow-forge	Ready	Preview, Comment	May 20, 2026 5:29pm

[Shriii19]

@SrashtiChauhan there is deployment error is coming so fix those error.
Error👇

./app/chat/page.tsx:876:11
Type error: Type '(e: ChangeEvent<HTMLInputElement, Element>) => void' is not assignable to type 'ChangeEventHandler<HTMLTextAreaElement, HTMLTextAreaElement>'.
Types of parameters 'e' and 'event' are incompatible.
Type 'ChangeEvent<HTMLTextAreaElement, HTMLTextAreaElement>' is not assignable to type 'ChangeEvent<HTMLInputElement, Element>'.
Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, capture, and 29 more.
874 | ref={inputRef}
875 | value={input}

876 | onChange={handleTyping}
| ^
877 | onKeyDown={handleKeyDown}
878 | placeholder={
879 | editingMessageId
Next.js build worker exited with code: 1 and signal: null
npm error Lifecycle script build failed with error:
npm error code 1
npm error path /vercel/path0/frontend
npm error workspace frontend@0.1.0
npm error location /vercel/path0/frontend
npm error command failed
npm error command sh -c cross-env NODE_OPTIONS=--max-old-space-size=4096 next build
Error: Command "npm run build" exited with 1

[SrashtiChauhan]

@SrashtiChauhan there is deployment error is coming so fix those error. Error👇

./app/chat/page.tsx:876:11 Type error: Type '(e: ChangeEvent<HTMLInputElement, Element>) => void' is not assignable to type 'ChangeEventHandler<HTMLTextAreaElement, HTMLTextAreaElement>'. Types of parameters 'e' and 'event' are incompatible. Type 'ChangeEvent<HTMLTextAreaElement, HTMLTextAreaElement>' is not assignable to type 'ChangeEvent<HTMLInputElement, Element>'. Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, capture, and 29 more. 874 | ref={inputRef} 875 | value={input}

876 | onChange={handleTyping}
| ^
877 | onKeyDown={handleKeyDown}
878 | placeholder={
879 | editingMessageId
Next.js build worker exited with code: 1 and signal: null
npm error Lifecycle script build failed with error:
npm error code 1
npm error path /vercel/path0/frontend
npm error workspace frontend@0.1.0
npm error location /vercel/path0/frontend
npm error command failed
npm error command sh -c cross-env NODE_OPTIONS=--max-old-space-size=4096 next build
Error: Command "npm run build" exited with 1

Changes Made

• Fixed TypeScript deployment error in Team Chat
• Updated typing handler from HTMLInputElement to HTMLTextAreaElement

[SrashtiChauhan]

@Shriii19
Could you please check it

[Shriii19]

@Shriii19 Could you please check it

@SrashtiChauhan well done.