From 9be2ba5fff2f04a143b57ecdb9df9658455eef85 Mon Sep 17 00:00:00 2001
From: shishirbychapur <shishirbychapur@gmail.com>
Date: Tue, 12 Nov 2024 20:39:30 +0800
Subject: [PATCH 1/3] fix: allow user to instantly queue after refreshing while
 in queue

---
 backend/matching-service/src/services/ws.service.ts | 13 +++++--------
 frontend/components/dashboard/new-session.tsx       |  2 +-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/backend/matching-service/src/services/ws.service.ts b/backend/matching-service/src/services/ws.service.ts
index f2b0edf372..be1a947521 100644
--- a/backend/matching-service/src/services/ws.service.ts
+++ b/backend/matching-service/src/services/ws.service.ts
@@ -4,6 +4,7 @@ import url from 'url'
 import WebSocket, { Server as WebSocketServer } from 'ws'
 import loggerUtil from '../common/logger.util'
 import { addUserToMatchmaking, removeUserFromMatchingQueue } from '../controllers/matching.controller'
+import mqConnection from './rabbitmq.service'
 
 export class WebSocketConnection {
     private wss: WebSocketServer
@@ -14,6 +15,7 @@ export class WebSocketConnection {
         this.wss.on('connection', (ws: WebSocket, req: IncomingMessage) => {
             const query = url.parse(req.url, true).query
             const websocketId = query.id as string
+            const userId = query.userId as string
 
             if (!websocketId) {
                 ws.close(1008, 'Missing userId')
@@ -22,15 +24,9 @@ export class WebSocketConnection {
 
             this.clients.set(websocketId, ws)
 
-            // // Close connection after 2 minutes automatically
-            // const closeAfterTimeout = setTimeout(() => {
-            //     ws.close(1000, 'Connection closed by server after 2 minutes')
-            // }, 120000)
-
             ws.on('message', (message: string) => this.handleMessage(message, websocketId))
             ws.on('close', () => {
-                // clearTimeout(closeAfterTimeout)
-                this.handleClose(websocketId)
+                this.handleClose(websocketId, userId)
             })
         })
     }
@@ -61,9 +57,10 @@ export class WebSocketConnection {
     }
 
     // Handle WebSocket close event
-    private handleClose(websocketId: string): void {
+    private handleClose(websocketId: string, userId: string): void {
         loggerUtil.info(`User ${websocketId} disconnected`)
         this.clients.delete(websocketId)
+        mqConnection.cancelUser(websocketId, userId)
     }
 
     // Send a message to a specific user by websocketId
diff --git a/frontend/components/dashboard/new-session.tsx b/frontend/components/dashboard/new-session.tsx
index 15b8b6f580..c998735027 100644
--- a/frontend/components/dashboard/new-session.tsx
+++ b/frontend/components/dashboard/new-session.tsx
@@ -82,7 +82,7 @@ export const NewSession = () => {
 
         // Refactor this
         const wsUrl = (process.env.NEXT_PUBLIC_API_URL || 'ws://localhost:3006')?.concat(
-            `/api/matching/ws/?id=${websocketId}`
+            `/api/matching/ws/?id=${websocketId}&userId=${session?.user.id ?? ''}`
         )
         const socket = new WebSocket(wsUrl)
         setTimeout(() => {

From 29a720b1322cea24b516cb682536f5531442cc10 Mon Sep 17 00:00:00 2001
From: shishirbychapur <shishirbychapur@gmail.com>
Date: Tue, 12 Nov 2024 23:39:09 +0800
Subject: [PATCH 2/3] feat: improve loading

---
 frontend/components/code/actions.tsx          |  85 ++++++++
 frontend/components/code/chat.tsx             | 119 +++++++++++
 .../{pages => components}/code/editor.tsx     |  15 +-
 .../code/language-mode-select.tsx             |   0
 frontend/components/code/question.tsx         |  59 ++++++
 .../code/read-only-editor.tsx                 |  15 +-
 .../code/test-result.tsx                      |   7 +-
 .../code/testcase-tab.tsx                     |   5 +
 frontend/components/customs/custom-loader.tsx |  69 +++++++
 frontend/components/dashboard/new-session.tsx |   7 +-
 .../components/dashboard/recent-sessions.tsx  |   7 +-
 .../components/dashboard/resume-session.tsx   |   8 +-
 frontend/components/ui/scroll-area.tsx        |  42 ++++
 frontend/components/ui/skeleton.tsx           |   7 +
 frontend/package.json                         |   9 +-
 frontend/pages/code/[id]/chat.tsx             |  93 ---------
 frontend/pages/code/[id]/index.tsx            | 185 +++++-------------
 frontend/pages/index.tsx                      |  24 +--
 frontend/pages/questions/index.tsx            |  14 +-
 frontend/pages/sessions/index.tsx             |  15 +-
 package-lock.json                             |  68 +++++++
 21 files changed, 569 insertions(+), 284 deletions(-)
 create mode 100644 frontend/components/code/actions.tsx
 create mode 100644 frontend/components/code/chat.tsx
 rename frontend/{pages => components}/code/editor.tsx (92%)
 rename frontend/{pages => components}/code/language-mode-select.tsx (100%)
 create mode 100644 frontend/components/code/question.tsx
 rename frontend/{pages => components}/code/read-only-editor.tsx (88%)
 rename frontend/{pages => components}/code/test-result.tsx (94%)
 rename frontend/{pages => components}/code/testcase-tab.tsx (88%)
 create mode 100644 frontend/components/customs/custom-loader.tsx
 create mode 100644 frontend/components/ui/scroll-area.tsx
 create mode 100644 frontend/components/ui/skeleton.tsx
 delete mode 100644 frontend/pages/code/[id]/chat.tsx

diff --git a/frontend/components/code/actions.tsx b/frontend/components/code/actions.tsx
new file mode 100644
index 0000000000..59020fee81
--- /dev/null
+++ b/frontend/components/code/actions.tsx
@@ -0,0 +1,85 @@
+import ConfirmDialog from '../customs/confirm-dialog'
+import UserAvatar from '../customs/custom-avatar'
+import { LongTextSkeleton } from '../customs/custom-loader'
+import { Button } from '../ui/button'
+import { EndIcon, PlayIcon } from '@/assets/icons'
+import { Cross1Icon } from '@radix-ui/react-icons'
+
+export const CodeActions = ({
+    isLoading,
+    isViewOnly,
+    handleRunTests,
+    isCodeRunning,
+    isOtherUserOnline,
+    handleEndSession,
+    username,
+    isDialogOpen,
+    setIsDialogOpen,
+    handleEndSessionConfirmation,
+}: {
+    isLoading: boolean
+    isViewOnly: boolean
+    handleEndSession: () => void
+    handleRunTests: () => void
+    isCodeRunning: boolean
+    isOtherUserOnline: boolean
+    username: string | undefined
+    isDialogOpen: boolean
+    setIsDialogOpen: (isOpen: boolean) => void
+    handleEndSessionConfirmation: () => void
+}) => {
+    const renderCloseButton = () => {
+        return isViewOnly ? (
+            <>
+                <Cross1Icon className="mr-2" />
+                Close
+            </>
+        ) : (
+            <>
+                <EndIcon fill="white" className="mr-2" />
+                End Session
+            </>
+        )
+    }
+
+    if (isLoading) {
+        return <LongTextSkeleton />
+    }
+
+    return (
+        <div id="control-panel" className="flex justify-between">
+            <div className="flex gap-3">
+                {!isViewOnly && (
+                    <Button variant={'primary'} onClick={handleRunTests} disabled={isCodeRunning}>
+                        {isCodeRunning ? (
+                            'Executing...'
+                        ) : (
+                            <>
+                                {' '}
+                                <PlayIcon fill="white" height="18px" width="18px" className="mr-2" />
+                                Run test
+                            </>
+                        )}
+                    </Button>
+                )}
+            </div>
+            <div className="flex flex-row items-center">
+                {!isViewOnly && <UserAvatar username={username ?? ''} isOnline={isOtherUserOnline} />}
+                <Button className="bg-red hover:bg-red-dark" onClick={handleEndSession}>
+                    {renderCloseButton()}
+                </Button>
+                <ConfirmDialog
+                    showCancelButton
+                    dialogData={{
+                        title: 'Warning!',
+                        content:
+                            'Are you sure you want to end the session? This will permanently end the session for both you and the other participant.',
+                        isOpen: isDialogOpen,
+                    }}
+                    closeHandler={() => setIsDialogOpen(false)}
+                    confirmHandler={handleEndSessionConfirmation}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/components/code/chat.tsx b/frontend/components/code/chat.tsx
new file mode 100644
index 0000000000..bc8a567d23
--- /dev/null
+++ b/frontend/components/code/chat.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import { FC, useEffect, useRef, useState } from 'react'
+import { useSession } from 'next-auth/react'
+import { ChatModel } from '@repo/collaboration-types'
+import { Button } from '@/components/ui/button'
+import Image from 'next/image'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+const formatTimestamp = (timestamp: string) => {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true }).toUpperCase()
+}
+
+const Chat: FC<{
+    chatData: ChatModel[]
+    isViewOnly: boolean
+    handleSendMessage: (msg: string) => void
+}> = ({ chatData, isViewOnly, handleSendMessage }) => {
+    const chatEndRef = useRef<HTMLDivElement | null>(null)
+    const { data: session } = useSession()
+    const [value, setValue] = useState('')
+    const [isChatOpen, setIsChatOpen] = useState(true)
+
+    const getChatBubbleFormat = (currUser: string, type: 'label' | 'text') => {
+        let format = ''
+        if (currUser === session?.user.username) {
+            format = 'items-end ml-5'
+            if (type === 'text') {
+                format += ' bg-theme-600 rounded-xl text-white'
+            }
+        } else {
+            format = 'items-start text-left mr-5'
+            if (type === 'text') {
+                format += ' bg-slate-100 rounded-xl p-2 text-slate-900'
+            }
+        }
+        return format
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' && e.currentTarget.value.trim() !== '') {
+            handleSendMessage(e.currentTarget.value)
+            setValue('')
+            e.currentTarget.value = ''
+        }
+    }
+
+    const toggleChat = () => {
+        setIsChatOpen(!isChatOpen)
+    }
+
+    useEffect(() => {
+        if (chatEndRef.current) {
+            chatEndRef.current.scrollIntoView({ behavior: 'smooth' })
+        }
+    }, [chatData])
+
+    return (
+        <>
+            <div className="border-2 rounded-lg border-slate-100 mt-4 max-h-twoFifthScreen flex flex-col">
+                <div className="flex items-center justify-between border-b-[1px] pl-3">
+                    <h3 className="text-lg font-medium">Chat</h3>
+                    <Button variant="iconNoBorder" size="icon" onClick={toggleChat}>
+                        <Image
+                            src={`/icons/${isChatOpen ? 'minimise' : 'maximise'}.svg`}
+                            alt="Minimise chat"
+                            width={20}
+                            height={20}
+                        />
+                    </Button>
+                </div>
+
+                {isChatOpen && (
+                    <ScrollArea className="overflow-y-auto p-3">
+                        {!!chatData?.length &&
+                            Object.values(chatData).map((chat, index) => (
+                                <div
+                                    key={index}
+                                    className={`flex flex-col gap-1 mb-5 ${getChatBubbleFormat(chat.senderId, 'label')}`}
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <h4 className="text-xs font-medium">{chat.senderId}</h4>
+                                        <span className="text-xs text-slate-400">
+                                            {formatTimestamp(chat.createdAt.toString())}
+                                        </span>
+                                    </div>
+                                    <div
+                                        className={`text-sm py-2 px-3 text-balance break-words w-full ${getChatBubbleFormat(chat.senderId, 'text')}`}
+                                    >
+                                        {chat.message}
+                                    </div>
+                                </div>
+                            ))}
+                        {(!chatData || !chatData?.length) && (
+                            <p className="w-full text-center text-gray-400 text-sm my-1">No chat history</p>
+                        )}
+                        <div ref={chatEndRef}></div>
+                        {!isViewOnly && (
+                            <div className="m-3 mt-0 px-3 py-1 border-[1px] rounded-xl text-sm">
+                                <input
+                                    type="text"
+                                    className="w-full bg-transparent border-none focus:outline-none"
+                                    placeholder="Send a message..."
+                                    onKeyDown={handleKeyDown}
+                                    value={value}
+                                    onChange={(e) => setValue(e.target.value)}
+                                    readOnly={isViewOnly}
+                                />
+                            </div>
+                        )}
+                    </ScrollArea>
+                )}
+            </div>
+        </>
+    )
+}
+
+export default Chat
diff --git a/frontend/pages/code/editor.tsx b/frontend/components/code/editor.tsx
similarity index 92%
rename from frontend/pages/code/editor.tsx
rename to frontend/components/code/editor.tsx
index 7e73465ffa..a4e027cb8d 100644
--- a/frontend/pages/code/editor.tsx
+++ b/frontend/components/code/editor.tsx
@@ -11,6 +11,7 @@ import { userColor } from '@/util/cursor-colors'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { javascript } from '@codemirror/lang-javascript'
 import { indentWithTab } from '@codemirror/commands'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
 interface IProps {
     roomId: string
@@ -93,15 +94,11 @@ const CodeMirrorEditor = forwardRef(({ roomId, language }: IProps, ref) => {
     }, [editorContainerRef, ydoc, ytext, session])
 
     return (
-        <div
-            ref={editorContainerRef}
-            style={{
-                height: '400px',
-                overflow: 'scroll',
-                border: '1px solid lightgray',
-                backgroundColor: '#282c34',
-            }}
-        />
+        <ScrollArea className="h-80 rounded-b-xl bg-[#282c34]">
+            <div ref={editorContainerRef} />
+            <ScrollBar orientation="vertical" />
+            <ScrollBar orientation="horizontal" />
+        </ScrollArea>
     )
 })
 
diff --git a/frontend/pages/code/language-mode-select.tsx b/frontend/components/code/language-mode-select.tsx
similarity index 100%
rename from frontend/pages/code/language-mode-select.tsx
rename to frontend/components/code/language-mode-select.tsx
diff --git a/frontend/components/code/question.tsx b/frontend/components/code/question.tsx
new file mode 100644
index 0000000000..c8d34d0c70
--- /dev/null
+++ b/frontend/components/code/question.tsx
@@ -0,0 +1,59 @@
+import { LargeTextSkeleton, TextSkeleton } from '@/components/customs/custom-loader'
+import { DifficultyLabel } from '@/components/customs/difficulty-label'
+import CustomLabel from '@/components/ui/label'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { capitalizeFirstLowerRest } from '@/util/string-modification'
+import { convertSortedComplexityToComplexity } from '@repo/question-types'
+import { Category, Complexity } from '@repo/user-types'
+
+const formatQuestionCategories = (cat: Category[]) => {
+    return cat.map((c) => capitalizeFirstLowerRest(c)).join(', ')
+}
+
+export const CodeQuestion = ({
+    loading,
+    title,
+    complexity,
+    categories,
+    description,
+}: {
+    loading: boolean
+    title: string
+    complexity: Complexity
+    categories: Category[]
+    description: string
+}) => {
+    if (loading) {
+        return (
+            <div id="question-data" className="flex-grow border-2 rounded-lg border-slate-100 mt-2 py-2 px-3">
+                <h3 className="text-lg font-medium">
+                    <TextSkeleton />
+                </h3>
+                <div className="flex gap-3 my-2 text-sm">
+                    <TextSkeleton />
+                    <TextSkeleton />
+                </div>
+                <div className="mt-6">
+                    <LargeTextSkeleton />
+                </div>
+            </div>
+        )
+    }
+    return (
+        <ScrollArea
+            id="question-data"
+            className="flex-grow border-2 rounded-lg border-slate-100 mt-2 py-2 px-3 overflow-y-auto"
+        >
+            <h3 className="text-lg font-medium">{title}</h3>
+            <div className="flex gap-3 my-2 text-sm">
+                <DifficultyLabel complexity={convertSortedComplexityToComplexity(complexity)} />
+                <CustomLabel
+                    title={formatQuestionCategories(categories ?? [])}
+                    textColor="text-theme"
+                    bgColor="bg-theme-100"
+                />
+            </div>
+            <div className="mt-6 whitespace-pre-wrap">{description}</div>
+        </ScrollArea>
+    )
+}
diff --git a/frontend/pages/code/read-only-editor.tsx b/frontend/components/code/read-only-editor.tsx
similarity index 88%
rename from frontend/pages/code/read-only-editor.tsx
rename to frontend/components/code/read-only-editor.tsx
index c68bd2ce91..3952ee65d6 100644
--- a/frontend/pages/code/read-only-editor.tsx
+++ b/frontend/components/code/read-only-editor.tsx
@@ -7,6 +7,7 @@ import { languages } from '@codemirror/language-data'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { javascript } from '@codemirror/lang-javascript'
 import { indentWithTab } from '@codemirror/commands'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
 interface IProps {
     language: string
@@ -60,15 +61,11 @@ const ReadOnlyCodeMirrorEditor = ({ language, code }: IProps) => {
     }, [editorContainerRef, code])
 
     return (
-        <div
-            ref={editorContainerRef}
-            style={{
-                height: '400px',
-                overflow: 'scroll',
-                border: '1px solid lightgray',
-                backgroundColor: '#282c34',
-            }}
-        />
+        <ScrollArea className="h-80 rounded-b-xl bg-[#282c34]">
+            <div ref={editorContainerRef} />
+            <ScrollBar orientation="vertical" />
+            <ScrollBar orientation="horizontal" />
+        </ScrollArea>
     )
 }
 
diff --git a/frontend/pages/code/test-result.tsx b/frontend/components/code/test-result.tsx
similarity index 94%
rename from frontend/pages/code/test-result.tsx
rename to frontend/components/code/test-result.tsx
index 51e37e0e32..1741255c08 100644
--- a/frontend/pages/code/test-result.tsx
+++ b/frontend/components/code/test-result.tsx
@@ -1,12 +1,17 @@
 import { ResultModel } from '@repo/collaboration-types'
+import { LargeTextSkeleton } from '../customs/custom-loader'
 
 export default function TestResult({
     result,
     expectedOutput,
+    isLoading,
 }: {
     result?: ResultModel | undefined
     expectedOutput: string
+    isLoading: boolean
 }) {
+    if (isLoading) return <LargeTextSkeleton />
+
     if (!result) return <div className="text-sm text-slate-400">No test results yet</div>
 
     if (!result.status) {
@@ -18,8 +23,6 @@ export default function TestResult({
         )
     }
 
-    const { id, description } = result.status
-
     return (
         <div className="w-full">
             <div className="w-full">
diff --git a/frontend/pages/code/testcase-tab.tsx b/frontend/components/code/testcase-tab.tsx
similarity index 88%
rename from frontend/pages/code/testcase-tab.tsx
rename to frontend/components/code/testcase-tab.tsx
index 0dd55f9d92..60fafc9070 100644
--- a/frontend/pages/code/testcase-tab.tsx
+++ b/frontend/components/code/testcase-tab.tsx
@@ -1,11 +1,14 @@
 import CustomTabs from '@/components/customs/custom-tabs'
+import { LargeTextSkeleton } from '../customs/custom-loader'
 
 export default function TestcasesTab({
+    isLoading,
     activeTestcaseIdx,
     setActiveTestcaseIdx,
     testInputs,
     testOutputs,
 }: {
+    isLoading: boolean
     activeTestcaseIdx: number
     setActiveTestcaseIdx: (tab: number) => void
     testInputs: string[]
@@ -13,6 +16,8 @@ export default function TestcasesTab({
 }) {
     const testcaseTabs = testInputs?.map((_, idx) => `Case ${idx + 1}`)
 
+    if (isLoading) return <LargeTextSkeleton />
+
     if (!testInputs || testInputs.length === 0) return null
     return (
         <div className="w-full">
diff --git a/frontend/components/customs/custom-loader.tsx b/frontend/components/customs/custom-loader.tsx
new file mode 100644
index 0000000000..e67f5c3c1a
--- /dev/null
+++ b/frontend/components/customs/custom-loader.tsx
@@ -0,0 +1,69 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+function TableSkeleton() {
+    return (
+        <div className="flex flex-col">
+            <Skeleton className="h-10 w-1/5 my-2" />
+            <Skeleton className="h-40 w-full my-2" />
+        </div>
+    )
+}
+
+function TextSkeleton() {
+    return <Skeleton className="inline-block align-baseline h-6 w-40" />
+}
+
+function LargeTextSkeleton() {
+    return <Skeleton className="inline-block align-baseline h-40 w-full" />
+}
+
+const NewSessionSkeleton = () => {
+    return (
+        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
+            <div>
+                <Skeleton className="w-1/3 h-10 mb-4" />
+                <LargeTextSkeleton />
+                <LargeTextSkeleton />
+            </div>
+            <LongTextSkeleton />
+        </div>
+    )
+}
+
+const RecentSessionSkeleton = () => {
+    return (
+        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
+            <div>
+                <Skeleton className="w-1/3 h-10 mb-4" />
+                <Skeleton className="inline-block align-baseline h-80 w-full" />
+            </div>
+            <LongTextSkeleton />
+        </div>
+    )
+}
+
+function LongTextSkeleton() {
+    return <Skeleton className="inline-block align-baseline h-6 w-full" />
+}
+
+function DataSkeleton() {
+    return (
+        <div className="flex flex-col space-y-3">
+            <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+            <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+            </div>
+        </div>
+    )
+}
+
+export {
+    TableSkeleton,
+    DataSkeleton,
+    TextSkeleton,
+    LargeTextSkeleton,
+    LongTextSkeleton,
+    NewSessionSkeleton,
+    RecentSessionSkeleton,
+}
diff --git a/frontend/components/dashboard/new-session.tsx b/frontend/components/dashboard/new-session.tsx
index c998735027..6198ed5c92 100644
--- a/frontend/components/dashboard/new-session.tsx
+++ b/frontend/components/dashboard/new-session.tsx
@@ -14,8 +14,9 @@ import { addUserToMatchmaking } from '../../services/matching-service-api'
 import CustomModal from '../customs/custom-modal'
 import Loading from '../customs/loading'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
+import { LargeTextSkeleton, NewSessionSkeleton } from '../customs/custom-loader'
 
-export const NewSession = () => {
+export const NewSession = ({ isLoading }: { isLoading: boolean }) => {
     const router = useRouter()
     const socketRef = useRef<WebSocket | undefined>(undefined)
 
@@ -166,6 +167,10 @@ export const NewSession = () => {
         }))
     }
 
+    if (isLoading) {
+        return <NewSessionSkeleton />
+    }
+
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div>
diff --git a/frontend/components/dashboard/recent-sessions.tsx b/frontend/components/dashboard/recent-sessions.tsx
index 8e09f1c0af..1158a70345 100644
--- a/frontend/components/dashboard/recent-sessions.tsx
+++ b/frontend/components/dashboard/recent-sessions.tsx
@@ -7,6 +7,7 @@ import { MoveRight } from 'lucide-react'
 import { IPartialSessions } from '@/types'
 import CustomLabel from '../ui/label'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
+import { RecentSessionSkeleton } from '../customs/custom-loader'
 
 const cols: { key: keyof IPartialSessions; label: string }[] = [
     {
@@ -23,7 +24,11 @@ const cols: { key: keyof IPartialSessions; label: string }[] = [
     },
 ]
 
-export const RecentSessions = ({ data }: { data: IPartialSessions[] }) => {
+export const RecentSessions = ({ data, isLoading }: { data: IPartialSessions[]; isLoading: boolean }) => {
+    if (isLoading) {
+        return <RecentSessionSkeleton />
+    }
+
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div>
diff --git a/frontend/components/dashboard/resume-session.tsx b/frontend/components/dashboard/resume-session.tsx
index 4f6ec06293..0c3f953a1c 100644
--- a/frontend/components/dashboard/resume-session.tsx
+++ b/frontend/components/dashboard/resume-session.tsx
@@ -3,13 +3,15 @@ import { Button } from '../ui/button'
 import { IMatch } from '@repo/user-types'
 import { convertSortedComplexityToComplexity } from '@repo/question-types'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
+import { LargeTextSkeleton } from '../customs/custom-loader'
 
 interface IResumeSessionProps {
     match: IMatch
     isOngoing: () => Promise<boolean>
+    isLoading: boolean
 }
 
-export default function ResumeSession({ match, isOngoing }: IResumeSessionProps) {
+export default function ResumeSession({ match, isOngoing, isLoading }: IResumeSessionProps) {
     const router = useRouter()
 
     const { category, complexity } = match
@@ -22,6 +24,10 @@ export default function ResumeSession({ match, isOngoing }: IResumeSessionProps)
         } catch (error) {}
     }
 
+    if (isLoading) {
+        return <LargeTextSkeleton />
+    }
+
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div className="space-y-6">
diff --git a/frontend/components/ui/scroll-area.tsx b/frontend/components/ui/scroll-area.tsx
new file mode 100644
index 0000000000..41b5fb17c4
--- /dev/null
+++ b/frontend/components/ui/scroll-area.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+const ScrollArea = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+    <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+            {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+            'flex touch-none select-none transition-colors',
+            orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+            orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+            className
+        )}
+        {...props}
+    >
+        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/frontend/components/ui/skeleton.tsx b/frontend/components/ui/skeleton.tsx
new file mode 100644
index 0000000000..15970f2fb5
--- /dev/null
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />
+}
+
+export { Skeleton }
diff --git a/frontend/package.json b/frontend/package.json
index fb7f1d8d14..d4ed431a29 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-navigation-menu": "^1.2.0",
         "@radix-ui/react-progress": "^1.1.0",
+        "@radix-ui/react-scroll-area": "^1.2.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
@@ -45,12 +46,13 @@
         "y-websocket": "^2.0.4"
     },
     "devDependencies": {
+        "@netlify/plugin-nextjs": "^5.8.1",
+        "@repo/collaboration-types": "*",
         "@repo/eslint-config": "*",
+        "@repo/submission-types": "*",
         "@repo/typescript-config": "*",
-        "@repo/ws-types": "*",
-        "@repo/collaboration-types": "*",
         "@repo/user-types": "*",
-        "@repo/submission-types": "*",
+        "@repo/ws-types": "*",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -58,7 +60,6 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
-        "@netlify/plugin-nextjs": "^5.8.1",
         "autoprefixer": "^10.4.20",
         "eslint": "^8",
         "eslint-config-next": "14.2.11",
diff --git a/frontend/pages/code/[id]/chat.tsx b/frontend/pages/code/[id]/chat.tsx
deleted file mode 100644
index 16cbf18b61..0000000000
--- a/frontend/pages/code/[id]/chat.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { FC, useEffect, useRef, useState } from 'react'
-import { useSession } from 'next-auth/react'
-import { ChatModel } from '@repo/collaboration-types'
-
-const formatTimestamp = (timestamp: string) => {
-    const date = new Date(timestamp)
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true }).toUpperCase()
-}
-
-const Chat: FC<{ chatData: ChatModel[]; isViewOnly: boolean; handleSendMessage: (msg: string) => void }> = ({
-    chatData,
-    isViewOnly,
-    handleSendMessage,
-}) => {
-    const chatEndRef = useRef<HTMLDivElement | null>(null)
-    const { data: session } = useSession()
-    const [value, setValue] = useState('')
-
-    const getChatBubbleFormat = (currUser: string, type: 'label' | 'text') => {
-        let format = ''
-        if (currUser === session?.user.username) {
-            format = 'items-end ml-5'
-            if (type === 'text') {
-                format += ' bg-theme-600 rounded-xl text-white'
-            }
-        } else {
-            format = 'items-start text-left mr-5'
-            if (type === 'text') {
-                format += ' bg-slate-100 rounded-xl p-2 text-slate-900'
-            }
-        }
-        return format
-    }
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter' && e.currentTarget.value.trim() !== '') {
-            handleSendMessage(e.currentTarget.value)
-            setValue('')
-            e.currentTarget.value = ''
-        }
-    }
-
-    useEffect(() => {
-        if (chatEndRef.current) {
-            chatEndRef.current.scrollIntoView({ behavior: 'smooth' })
-        }
-    }, [chatData])
-
-    return (
-        <>
-            <div className="overflow-y-auto p-3">
-                {!!chatData?.length &&
-                    Object.values(chatData).map((chat, index) => (
-                        <div
-                            key={index}
-                            className={`flex flex-col gap-1 mb-5 ${getChatBubbleFormat(chat.senderId, 'label')}`}
-                        >
-                            <div className="flex items-center gap-2">
-                                <h4 className="text-xs font-medium">{chat.senderId}</h4>
-                                <span className="text-xs text-slate-400">
-                                    {formatTimestamp(chat.createdAt.toString())}
-                                </span>
-                            </div>
-                            <div
-                                className={`text-sm py-2 px-3 text-balance break-words w-full ${getChatBubbleFormat(chat.senderId, 'text')}`}
-                            >
-                                {chat.message}
-                            </div>
-                        </div>
-                    ))}
-                {(!chatData || !chatData?.length) && (
-                    <p className="w-full text-center text-gray-400 text-sm my-1">No chat history</p>
-                )}
-                <div ref={chatEndRef}></div>
-            </div>
-            {!isViewOnly && (
-                <div className="m-3 mt-0 px-3 py-1 border-[1px] rounded-xl text-sm">
-                    <input
-                        type="text"
-                        className="w-full bg-transparent border-none focus:outline-none"
-                        placeholder="Send a message..."
-                        onKeyDown={handleKeyDown}
-                        value={value}
-                        onChange={(e) => setValue(e.target.value)}
-                        readOnly={isViewOnly}
-                    />
-                </div>
-            )}
-        </>
-    )
-}
-
-export default Chat
diff --git a/frontend/pages/code/[id]/index.tsx b/frontend/pages/code/[id]/index.tsx
index 8143c6c0ba..548ea88e88 100644
--- a/frontend/pages/code/[id]/index.tsx
+++ b/frontend/pages/code/[id]/index.tsx
@@ -1,47 +1,38 @@
 'use client'
 
-import { EndIcon, PlayIcon } from '@/assets/icons'
 import { ChatModel, ICollabDto, LanguageMode, getCodeMirrorLanguage } from '@repo/collaboration-types'
 import { useEffect, useRef, useState } from 'react'
 
-import { Button } from '@/components/ui/button'
-import CustomLabel from '@/components/ui/label'
 import CustomTabs from '@/components/customs/custom-tabs'
-import { DifficultyLabel } from '@/components/customs/difficulty-label'
 import Image from 'next/image'
-import LanguageModeSelect from '../language-mode-select'
+import LanguageModeSelect from '../../../components/code/language-mode-select'
 import React from 'react'
-import TestcasesTab from '../testcase-tab'
+import TestcasesTab from '../../../components/code/testcase-tab'
 import useProtectedRoute from '@/hooks/UseProtectedRoute'
 import { useRouter } from 'next/router'
-import CodeMirrorEditor from '../editor'
-import { Category, IMatch, SortedComplexity } from '@repo/user-types'
+import CodeMirrorEditor from '../../../components/code/editor'
+import { Complexity, IMatch } from '@repo/user-types'
 import { useSession } from 'next-auth/react'
 import { getMatchDetails } from '@/services/matching-service-api'
-import { convertSortedComplexityToComplexity } from '@repo/question-types'
-import Chat from './chat'
+import Chat from '../../../components/code/chat'
 import io, { Socket } from 'socket.io-client'
-import UserAvatar from '@/components/customs/custom-avatar'
 import { toast } from 'sonner'
 import { ISubmission } from '@repo/submission-types'
 import { mapLanguageToJudge0 } from '@/util/language-mapper'
-import TestResult from '../test-result'
-import { Cross1Icon } from '@radix-ui/react-icons'
-import ConfirmDialog from '@/components/customs/confirm-dialog'
+import TestResult from '../../../components/code/test-result'
 import { getChatHistory, getCollabHistory } from '@/services/collaboration-service-api'
-import ReadOnlyCodeMirrorEditor from '../read-only-editor'
+import ReadOnlyCodeMirrorEditor from '../../../components/code/read-only-editor'
 import { ResultModel } from '@repo/collaboration-types'
-import { capitalizeFirstLowerRest } from '@/util/string-modification'
-
-const formatQuestionCategories = (cat: Category[]) => {
-    return cat.map((c) => capitalizeFirstLowerRest(c)).join(', ')
-}
+import { TextSkeleton } from '@/components/customs/custom-loader'
+import { CodeQuestion } from '../../../components/code/question'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { CodeActions } from '@/components/code/actions'
 
 export default function Code() {
     const router = useRouter()
-    const [isChatOpen, setIsChatOpen] = useState(true)
     const { id } = router.query
     const editorRef = useRef<{ getText: () => string } | null>(null)
+    const [loading, setLoading] = useState(true)
     const [editorLanguage, setEditorLanguage] = useState<LanguageMode>(LanguageMode.Javascript)
     const testTabs = ['Testcases', 'Test Results']
     const [chatData, setChatData] = useState<ChatModel[]>([])
@@ -59,6 +50,8 @@ export default function Code() {
         undefined
     )
 
+    useProtectedRoute()
+
     const retrieveMatchDetails = async (matchId: string) => {
         const response = await getMatchDetails(matchId).catch((err) => {
             if (retry >= 3) {
@@ -75,6 +68,7 @@ export default function Code() {
                 setEditorLanguage(collabResponse?.language ?? LanguageMode.Javascript)
                 setCollabData(collabResponse)
             }
+            setLoading(false)
         }
     }
 
@@ -150,10 +144,6 @@ export default function Code() {
         }
     }, [isViewOnly])
 
-    const toggleChat = () => {
-        setIsChatOpen(!isChatOpen)
-    }
-
     const handleSendMessage = (message: string) => {
         if (message.trim()) {
             const msg: ChatModel = {
@@ -207,24 +197,6 @@ export default function Code() {
         setIsDialogOpen(false)
     }
 
-    const renderCloseButton = () => {
-        return isViewOnly ? (
-            <>
-                <Cross1Icon className="mr-2" />
-                Close
-            </>
-        ) : (
-            <>
-                <EndIcon fill="white" className="mr-2" />
-                End Session
-            </>
-        )
-    }
-
-    const { loading } = useProtectedRoute()
-
-    if (loading) return null
-
     return (
         <div className="flex gap-3">
             <section className="w-1/3 flex flex-col h-fullscreen">
@@ -232,98 +204,43 @@ export default function Code() {
                     <Image src="/logo.svg" alt="Logo" width={28} height={28} className="my-2" />
                     <h2 className="text-lg font-medium">
                         Session with:{' '}
-                        {sessionData?.user.username !== matchData?.user1Name
-                            ? matchData?.user1Name
-                            : matchData?.user2Name}
+                        {loading ? (
+                            <TextSkeleton />
+                        ) : sessionData?.user.username !== matchData?.user1Name ? (
+                            matchData?.user1Name
+                        ) : (
+                            matchData?.user2Name
+                        )}
                     </h2>
                 </div>
-                <div
-                    id="question-data"
-                    className="flex-grow border-2 rounded-lg border-slate-100 mt-2 py-2 px-3 overflow-y-auto"
-                >
-                    <h3 className="text-lg font-medium">{matchData?.question.title}</h3>
-                    <div className="flex gap-3 my-2 text-sm">
-                        <DifficultyLabel
-                            complexity={convertSortedComplexityToComplexity(
-                                matchData?.question.complexity ?? SortedComplexity.EASY
-                            )}
-                        />
-                        <CustomLabel
-                            title={formatQuestionCategories(matchData?.question.categories ?? [])}
-                            textColor="text-theme"
-                            bgColor="bg-theme-100"
-                        />
-                    </div>
-                    <div className="mt-6 whitespace-pre-wrap">{matchData?.question.description}</div>
-                </div>
-
-                <div className="border-2 rounded-lg border-slate-100 mt-4 max-h-twoFifthScreen flex flex-col">
-                    <div className="flex items-center justify-between border-b-[1px] pl-3 ">
-                        <h3 className="text-lg font-medium">Chat</h3>
-                        <Button variant="iconNoBorder" size="icon" onClick={toggleChat}>
-                            <Image
-                                src={`/icons/${isChatOpen ? 'minimise' : 'maximise'}.svg`}
-                                alt="Minimise chat"
-                                width={20}
-                                height={20}
-                            />
-                        </Button>
-                    </div>
-                    {isChatOpen && (
-                        <Chat
-                            chatData={isViewOnly ? (collabData?.chatHistory ?? []) : chatData}
-                            isViewOnly={isViewOnly}
-                            handleSendMessage={handleSendMessage}
-                        />
-                    )}
-                </div>
+                <CodeQuestion
+                    complexity={matchData?.question.complexity ?? Complexity.EASY}
+                    loading={loading}
+                    title={matchData?.question.title ?? ''}
+                    description={matchData?.question.description ?? ''}
+                    categories={matchData?.question.categories ?? []}
+                />
+                <Chat
+                    isViewOnly={isViewOnly}
+                    chatData={isViewOnly ? (collabData?.chatHistory ?? []) : chatData}
+                    handleSendMessage={handleSendMessage}
+                />
             </section>
             <section className="w-2/3 flex flex-col h-fullscreen">
-                <div id="control-panel" className="flex justify-between">
-                    <div className="flex gap-3">
-                        {!isViewOnly && (
-                            <Button variant={'primary'} onClick={handleRunTests} disabled={isCodeRunning}>
-                                {isCodeRunning ? (
-                                    'Executing...'
-                                ) : (
-                                    <>
-                                        {' '}
-                                        <PlayIcon fill="white" height="18px" width="18px" className="mr-2" />
-                                        Run test
-                                    </>
-                                )}
-                            </Button>
-                        )}
-                    </div>
-                    <div className="flex flex-row items-center">
-                        {!isViewOnly && (
-                            <UserAvatar
-                                username={
-                                    matchData?.user1Id === sessionData?.user.id
-                                        ? matchData?.user2Name
-                                        : matchData?.user1Name
-                                }
-                                isOnline={isOtherUserOnline}
-                            />
-                        )}
-                        <Button className="bg-red hover:bg-red-dark" onClick={handleEndSession}>
-                            {renderCloseButton()}
-                        </Button>
-                        <ConfirmDialog
-                            showCancelButton
-                            dialogData={{
-                                title: 'Warning!',
-                                content:
-                                    'Are you sure you want to end the session? This will permanently end the session for both you and the other participant.',
-                                isOpen: isDialogOpen,
-                            }}
-                            closeHandler={() => setIsDialogOpen(false)}
-                            confirmHandler={handleEndSessionConfirmation}
-                        />
-                    </div>
-                </div>
+                <CodeActions
+                    isLoading={loading}
+                    isViewOnly={isViewOnly}
+                    username={matchData?.user1Id === sessionData?.user.id ? matchData?.user2Name : matchData?.user1Name}
+                    isCodeRunning={isCodeRunning}
+                    handleRunTests={handleRunTests}
+                    isOtherUserOnline={isOtherUserOnline}
+                    handleEndSession={handleEndSession}
+                    isDialogOpen={isDialogOpen}
+                    setIsDialogOpen={setIsDialogOpen}
+                    handleEndSessionConfirmation={handleEndSessionConfirmation}
+                />
                 <div id="editor-container" className="mt-4">
-                    <div id="language-mode-select" className="rounded-t-xl bg-black">
+                    <div id="language-mode-select" className="rounded-t-xl bg-neutral-800">
                         <LanguageModeSelect
                             displayValue={editorLanguage}
                             setDisplayValue={setEditorLanguage}
@@ -351,13 +268,14 @@ export default function Code() {
                     setActiveTab={setActiveTestTab}
                     className="mt-4 border-2 rounded-t-lg border-slate-100"
                 />
-                <div
+                <ScrollArea
                     id="test-results-container"
-                    className="border-2 rounded-lg border-t-0 rounded-t-none border-slate-100 flex-grow overflow-y-auto"
+                    className="border-2 rounded-lg border-t-0 rounded-t-none border-slate-100 flex-grow"
                 >
                     <div className="m-4 flex overflow-x-auto">
                         {activeTestTab === 0 ? (
                             <TestcasesTab
+                                isLoading={loading}
                                 activeTestcaseIdx={activeTest}
                                 setActiveTestcaseIdx={setActiveTest}
                                 testInputs={matchData?.question.testInputs ?? []}
@@ -365,6 +283,7 @@ export default function Code() {
                             />
                         ) : (
                             <TestResult
+                                isLoading={isCodeRunning}
                                 result={isViewOnly ? collabData?.executionResult : testResult?.data}
                                 expectedOutput={
                                     isViewOnly
@@ -376,7 +295,7 @@ export default function Code() {
                             />
                         )}
                     </div>
-                </div>
+                </ScrollArea>
             </section>
         </div>
     )
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 82e82f48b0..60200925d7 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import ConfirmDialog, { ConfirmDialogProps } from '@/components/customs/confirm-dialog'
-import Loading from '@/components/customs/loading'
 import { NewSession } from '@/components/dashboard/new-session'
 import { ProgressCard } from '@/components/dashboard/progress-card'
 import { RecentSessions } from '@/components/dashboard/recent-sessions'
@@ -38,7 +37,7 @@ export default function Home() {
         },
     ]
 
-    const { session, loading } = useProtectedRoute()
+    const { session } = useProtectedRoute()
     const [ongoingMatchData, setOngoingMatchData] = useState<IMatch | null>()
     const [dialog, setDialog] = useState<ConfirmDialogProps>({
         dialogData: {
@@ -55,6 +54,8 @@ export default function Home() {
         showCancelButton: false,
     })
     const [recentSessions, setRecentSessions] = useState<IPartialSessions[]>([])
+    const [loadingNewSession, setLoadingNewSession] = useState(true)
+    const [loadingRecentSessions, setLoadingRecentSessions] = useState(true)
 
     const checkOngoingSession = async () => {
         if (!session?.user?.id) return
@@ -102,17 +103,12 @@ export default function Home() {
     }
 
     useEffect(() => {
-        checkOngoingSession()
-        getRecentSessions()
+        setLoadingNewSession(true)
+        setLoadingRecentSessions(true)
+        checkOngoingSession().then(() => setLoadingNewSession(false))
+        getRecentSessions().then(() => setLoadingRecentSessions(false))
     }, [])
 
-    if (loading)
-        return (
-            <div className="flex flex-col h-screen w-screen items-center justify-center">
-                <Loading />
-            </div>
-        )
-
     return (
         <div className="my-4">
             <h2 className="text-xl font-bold my-6">Welcome Back, {session?.user.username}</h2>
@@ -130,11 +126,11 @@ export default function Home() {
             </div>
             <div className="flex flex-row justify-between my-4">
                 {ongoingMatchData ? (
-                    <ResumeSession match={ongoingMatchData} isOngoing={handleIsOngoing} />
+                    <ResumeSession match={ongoingMatchData} isOngoing={handleIsOngoing} isLoading={loadingNewSession} />
                 ) : (
-                    <NewSession />
+                    <NewSession isLoading={loadingNewSession} />
                 )}
-                <RecentSessions data={recentSessions} />
+                <RecentSessions data={recentSessions} isLoading={loadingRecentSessions} />
             </div>
             <ConfirmDialog {...dialog} />
         </div>
diff --git a/frontend/pages/questions/index.tsx b/frontend/pages/questions/index.tsx
index 2b556e3f33..4d241657a2 100644
--- a/frontend/pages/questions/index.tsx
+++ b/frontend/pages/questions/index.tsx
@@ -21,8 +21,10 @@ import { useSession } from 'next-auth/react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { formFields, getColumns } from './props'
+import { TableSkeleton } from '@/components/customs/custom-loader'
 
 export default function Questions() {
+    const [loading, setLoading] = useState(true)
     const { data: session } = useSession()
     const isAdmin = session?.user.role === Role.ADMIN
 
@@ -225,19 +227,15 @@ export default function Questions() {
         loadData()
     }
 
-    const { loading } = useProtectedRoute()
+    useProtectedRoute()
 
     useEffect(() => {
         if (!session) return
-        loadData()
+        setLoading(true)
+        loadData().then(() => setLoading(false))
     }, [])
 
-    if (loading)
-        return (
-            <div className="flex flex-col h-screen w-screen items-center justify-center">
-                <Loading />
-            </div>
-        )
+    if (loading) return <TableSkeleton />
 
     return (
         <div className="m-8">
diff --git a/frontend/pages/sessions/index.tsx b/frontend/pages/sessions/index.tsx
index 913bb4f212..34bb54ea40 100644
--- a/frontend/pages/sessions/index.tsx
+++ b/frontend/pages/sessions/index.tsx
@@ -2,7 +2,6 @@ import { IGetSessions, IPagination, ISession, ISortBy, SessionManager, SortDirec
 import { useEffect, useState } from 'react'
 
 import Datatable from '@/components/customs/datatable'
-import Loading from '@/components/customs/loading'
 import useProtectedRoute from '@/hooks/UseProtectedRoute'
 import { columns } from './columns'
 import { toast } from 'sonner'
@@ -11,9 +10,11 @@ import { Button } from '@/components/ui/button'
 import ConfirmDialog, { ConfirmDialogProps } from '@/components/customs/confirm-dialog'
 import { getOngoingMatch } from '@/services/matching-service-api'
 import { useRouter } from 'next/router'
+import { TableSkeleton } from '@/components/customs/custom-loader'
 
 export default function Sessions() {
     const router = useRouter()
+    const [loading, setLoading] = useState(true)
     const [data, setData] = useState<ISession[]>([])
     const [pagination, setPagination] = useState<IPagination>({
         totalPages: 1,
@@ -51,7 +52,7 @@ export default function Sessions() {
         checkOngoingSession()
     }, [])
 
-    const { session, loading } = useProtectedRoute()
+    const { session } = useProtectedRoute()
 
     const paginationHandler = (page: number, limit: number) => {
         const body = {
@@ -91,12 +92,13 @@ export default function Sessions() {
     }
 
     const loadData = async () => {
+        setLoading(true)
         const body: IGetSessions = {
             page: pagination.currentPage,
             limit: pagination.limit,
             sortBy: sortBy,
         }
-        await load(body)
+        await load(body).then(() => setLoading(false))
     }
 
     const checkOngoingSession = async () => {
@@ -117,12 +119,7 @@ export default function Sessions() {
         }
     }
 
-    if (loading)
-        return (
-            <div className="flex flex-col h-screen w-screen items-center justify-center">
-                <Loading />
-            </div>
-        )
+    if (loading) return <TableSkeleton />
 
     return (
         <div className="m-8">
diff --git a/package-lock.json b/package-lock.json
index 5fee98189d..41c8b339f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -278,6 +278,7 @@
                 "@radix-ui/react-icons": "^1.3.0",
                 "@radix-ui/react-navigation-menu": "^1.2.0",
                 "@radix-ui/react-progress": "^1.1.0",
+                "@radix-ui/react-scroll-area": "^1.2.0",
                 "@radix-ui/react-select": "^2.1.1",
                 "@radix-ui/react-slot": "^1.1.0",
                 "@radix-ui/react-tabs": "^1.1.0",
@@ -3685,6 +3686,73 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-scroll-area": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.0.tgz",
+            "integrity": "sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==",
+            "dependencies": {
+                "@radix-ui/number": "1.1.0",
+                "@radix-ui/primitive": "1.1.0",
+                "@radix-ui/react-compose-refs": "1.1.0",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-presence": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.0",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "@radix-ui/react-use-layout-effect": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-context": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+            "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-presence": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+            "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.0",
+                "@radix-ui/react-use-layout-effect": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-select": {
             "version": "2.1.1",
             "license": "MIT",

From b56494b6e3efbdbf2a7b2ce276b2f64ea6c2bbc0 Mon Sep 17 00:00:00 2001
From: shishirbychapur <shishirbychapur@gmail.com>
Date: Wed, 13 Nov 2024 00:56:32 +0800
Subject: [PATCH 3/3] fix: resolve bug in landing page

---
 frontend/components/customs/custom-loader.tsx | 35 +------------------
 frontend/components/dashboard/new-session.tsx |  7 +---
 .../components/dashboard/recent-sessions.tsx  |  7 +---
 .../components/dashboard/resume-session.tsx   |  8 +----
 frontend/pages/index.tsx                      | 24 +++++++------
 5 files changed, 18 insertions(+), 63 deletions(-)

diff --git a/frontend/components/customs/custom-loader.tsx b/frontend/components/customs/custom-loader.tsx
index e67f5c3c1a..934de5e19a 100644
--- a/frontend/components/customs/custom-loader.tsx
+++ b/frontend/components/customs/custom-loader.tsx
@@ -17,31 +17,6 @@ function LargeTextSkeleton() {
     return <Skeleton className="inline-block align-baseline h-40 w-full" />
 }
 
-const NewSessionSkeleton = () => {
-    return (
-        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
-            <div>
-                <Skeleton className="w-1/3 h-10 mb-4" />
-                <LargeTextSkeleton />
-                <LargeTextSkeleton />
-            </div>
-            <LongTextSkeleton />
-        </div>
-    )
-}
-
-const RecentSessionSkeleton = () => {
-    return (
-        <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
-            <div>
-                <Skeleton className="w-1/3 h-10 mb-4" />
-                <Skeleton className="inline-block align-baseline h-80 w-full" />
-            </div>
-            <LongTextSkeleton />
-        </div>
-    )
-}
-
 function LongTextSkeleton() {
     return <Skeleton className="inline-block align-baseline h-6 w-full" />
 }
@@ -58,12 +33,4 @@ function DataSkeleton() {
     )
 }
 
-export {
-    TableSkeleton,
-    DataSkeleton,
-    TextSkeleton,
-    LargeTextSkeleton,
-    LongTextSkeleton,
-    NewSessionSkeleton,
-    RecentSessionSkeleton,
-}
+export { TableSkeleton, DataSkeleton, TextSkeleton, LargeTextSkeleton, LongTextSkeleton }
diff --git a/frontend/components/dashboard/new-session.tsx b/frontend/components/dashboard/new-session.tsx
index 6198ed5c92..c998735027 100644
--- a/frontend/components/dashboard/new-session.tsx
+++ b/frontend/components/dashboard/new-session.tsx
@@ -14,9 +14,8 @@ import { addUserToMatchmaking } from '../../services/matching-service-api'
 import CustomModal from '../customs/custom-modal'
 import Loading from '../customs/loading'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
-import { LargeTextSkeleton, NewSessionSkeleton } from '../customs/custom-loader'
 
-export const NewSession = ({ isLoading }: { isLoading: boolean }) => {
+export const NewSession = () => {
     const router = useRouter()
     const socketRef = useRef<WebSocket | undefined>(undefined)
 
@@ -167,10 +166,6 @@ export const NewSession = ({ isLoading }: { isLoading: boolean }) => {
         }))
     }
 
-    if (isLoading) {
-        return <NewSessionSkeleton />
-    }
-
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div>
diff --git a/frontend/components/dashboard/recent-sessions.tsx b/frontend/components/dashboard/recent-sessions.tsx
index 1158a70345..8e09f1c0af 100644
--- a/frontend/components/dashboard/recent-sessions.tsx
+++ b/frontend/components/dashboard/recent-sessions.tsx
@@ -7,7 +7,6 @@ import { MoveRight } from 'lucide-react'
 import { IPartialSessions } from '@/types'
 import CustomLabel from '../ui/label'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
-import { RecentSessionSkeleton } from '../customs/custom-loader'
 
 const cols: { key: keyof IPartialSessions; label: string }[] = [
     {
@@ -24,11 +23,7 @@ const cols: { key: keyof IPartialSessions; label: string }[] = [
     },
 ]
 
-export const RecentSessions = ({ data, isLoading }: { data: IPartialSessions[]; isLoading: boolean }) => {
-    if (isLoading) {
-        return <RecentSessionSkeleton />
-    }
-
+export const RecentSessions = ({ data }: { data: IPartialSessions[] }) => {
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div>
diff --git a/frontend/components/dashboard/resume-session.tsx b/frontend/components/dashboard/resume-session.tsx
index 0c3f953a1c..4f6ec06293 100644
--- a/frontend/components/dashboard/resume-session.tsx
+++ b/frontend/components/dashboard/resume-session.tsx
@@ -3,15 +3,13 @@ import { Button } from '../ui/button'
 import { IMatch } from '@repo/user-types'
 import { convertSortedComplexityToComplexity } from '@repo/question-types'
 import { capitalizeFirstLowerRest } from '@/util/string-modification'
-import { LargeTextSkeleton } from '../customs/custom-loader'
 
 interface IResumeSessionProps {
     match: IMatch
     isOngoing: () => Promise<boolean>
-    isLoading: boolean
 }
 
-export default function ResumeSession({ match, isOngoing, isLoading }: IResumeSessionProps) {
+export default function ResumeSession({ match, isOngoing }: IResumeSessionProps) {
     const router = useRouter()
 
     const { category, complexity } = match
@@ -24,10 +22,6 @@ export default function ResumeSession({ match, isOngoing, isLoading }: IResumeSe
         } catch (error) {}
     }
 
-    if (isLoading) {
-        return <LargeTextSkeleton />
-    }
-
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div className="space-y-6">
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 60200925d7..82e82f48b0 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import ConfirmDialog, { ConfirmDialogProps } from '@/components/customs/confirm-dialog'
+import Loading from '@/components/customs/loading'
 import { NewSession } from '@/components/dashboard/new-session'
 import { ProgressCard } from '@/components/dashboard/progress-card'
 import { RecentSessions } from '@/components/dashboard/recent-sessions'
@@ -37,7 +38,7 @@ export default function Home() {
         },
     ]
 
-    const { session } = useProtectedRoute()
+    const { session, loading } = useProtectedRoute()
     const [ongoingMatchData, setOngoingMatchData] = useState<IMatch | null>()
     const [dialog, setDialog] = useState<ConfirmDialogProps>({
         dialogData: {
@@ -54,8 +55,6 @@ export default function Home() {
         showCancelButton: false,
     })
     const [recentSessions, setRecentSessions] = useState<IPartialSessions[]>([])
-    const [loadingNewSession, setLoadingNewSession] = useState(true)
-    const [loadingRecentSessions, setLoadingRecentSessions] = useState(true)
 
     const checkOngoingSession = async () => {
         if (!session?.user?.id) return
@@ -103,12 +102,17 @@ export default function Home() {
     }
 
     useEffect(() => {
-        setLoadingNewSession(true)
-        setLoadingRecentSessions(true)
-        checkOngoingSession().then(() => setLoadingNewSession(false))
-        getRecentSessions().then(() => setLoadingRecentSessions(false))
+        checkOngoingSession()
+        getRecentSessions()
     }, [])
 
+    if (loading)
+        return (
+            <div className="flex flex-col h-screen w-screen items-center justify-center">
+                <Loading />
+            </div>
+        )
+
     return (
         <div className="my-4">
             <h2 className="text-xl font-bold my-6">Welcome Back, {session?.user.username}</h2>
@@ -126,11 +130,11 @@ export default function Home() {
             </div>
             <div className="flex flex-row justify-between my-4">
                 {ongoingMatchData ? (
-                    <ResumeSession match={ongoingMatchData} isOngoing={handleIsOngoing} isLoading={loadingNewSession} />
+                    <ResumeSession match={ongoingMatchData} isOngoing={handleIsOngoing} />
                 ) : (
-                    <NewSession isLoading={loadingNewSession} />
+                    <NewSession />
                 )}
-                <RecentSessions data={recentSessions} isLoading={loadingRecentSessions} />
+                <RecentSessions data={recentSessions} />
             </div>
             <ConfirmDialog {...dialog} />
         </div>