diff --git a/apps/web/ce/store/issue/issue-details/activity.store.ts b/apps/web/ce/store/issue/issue-details/activity.store.ts
index 377cc6ff9e..47b4205a1b 100644
--- a/apps/web/ce/store/issue/issue-details/activity.store.ts
+++ b/apps/web/ce/store/issue/issue-details/activity.store.ts
@@ -43,7 +43,7 @@ export interface IIssueActivityStore extends IIssueActivityStoreActions {
   // helper methods
   getActivitiesByIssueId: (issueId: string) => string[] | undefined;
   getActivityById: (activityId: string) => TIssueActivity | undefined;
-  getActivityCommentByIssueId: (issueId: string, sortOrder: E_SORT_ORDER) => TIssueActivityComment[] | undefined;
+  getActivityAndCommentsByIssueId: (issueId: string, sortOrder: E_SORT_ORDER) => TIssueActivityComment[] | undefined;
 }
 
 export class IssueActivityStore implements IIssueActivityStore {
@@ -84,7 +84,7 @@ export class IssueActivityStore implements IIssueActivityStore {
     return this.activityMap[activityId] ?? undefined;
   };
 
-  getActivityCommentByIssueId = computedFn((issueId: string, sortOrder: E_SORT_ORDER) => {
+  getActivityAndCommentsByIssueId = computedFn((issueId: string, sortOrder: E_SORT_ORDER) => {
     if (!issueId) return undefined;
 
     let activityComments: TIssueActivityComment[] = [];
@@ -92,10 +92,12 @@ export class IssueActivityStore implements IIssueActivityStore {
     const currentStore =
       this.serviceType === EIssueServiceType.EPICS ? this.store.issue.epicDetail : this.store.issue.issueDetail;
 
-    const activities = this.getActivitiesByIssueId(issueId) || [];
-    const comments = currentStore.comment.getCommentsByIssueId(issueId) || [];
+    const activities = this.getActivitiesByIssueId(issueId);
+    const comments = currentStore.comment.getCommentsByIssueId(issueId);
 
-    activities.forEach((activityId) => {
+    if (!activities || !comments) return undefined;
+
+    activities?.forEach((activityId) => {
       const activity = this.getActivityById(activityId);
       if (!activity) return;
       activityComments.push({
@@ -105,7 +107,7 @@ export class IssueActivityStore implements IIssueActivityStore {
       });
     });
 
-    comments.forEach((commentId) => {
+    comments?.forEach((commentId) => {
       const comment = currentStore.comment.getCommentById(commentId);
       if (!comment) return;
       activityComments.push({
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
index d9ef5ef1a6..5b0d073a1a 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
@@ -1,16 +1,18 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-// constants
+// plane imports
 import { E_SORT_ORDER, TActivityFilters, filterActivityOnSelectedFilters } from "@plane/constants";
-// hooks
 import { TCommentsOperations } from "@plane/types";
+// components
 import { CommentCard } from "@/components/comments/card/root";
+// hooks
 import { useIssueDetail } from "@/hooks/store";
 // plane web components
 import { IssueAdditionalPropertiesActivity } from "@/plane-web/components/issues";
 import { IssueActivityWorklog } from "@/plane-web/components/issues/worklog/activity/root";
-// components
+// local imports
 import { IssueActivityItem } from "./activity/activity-list";
+import { IssueActivityLoader } from "./loader";
 
 type TIssueActivityCommentRoot = {
   workspaceSlug: string;
@@ -34,21 +36,23 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
     disabled,
     sortOrder,
   } = props;
-  // hooks
+  // store hooks
   const {
-    activity: { getActivityCommentByIssueId },
+    activity: { getActivityAndCommentsByIssueId },
     comment: { getCommentById },
   } = useIssueDetail();
+  // derived values
+  const activityAndComments = getActivityAndCommentsByIssueId(issueId, sortOrder);
 
-  const activityComments = getActivityCommentByIssueId(issueId, sortOrder);
+  if (!activityAndComments) return <IssueActivityLoader />;
 
-  if (!activityComments || (activityComments && activityComments.length <= 0)) return <></>;
+  if (activityAndComments.length <= 0) return null;
 
-  const filteredActivityComments = filterActivityOnSelectedFilters(activityComments, selectedFilters);
+  const filteredActivityAndComments = filterActivityOnSelectedFilters(activityAndComments, selectedFilters);
 
   return (
     <div>
-      {filteredActivityComments.map((activityComment, index) => {
+      {filteredActivityAndComments.map((activityComment, index) => {
         const comment = getCommentById(activityComment.id);
         return activityComment.activity_type === "COMMENT" ? (
           <CommentCard
@@ -56,7 +60,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
             workspaceSlug={workspaceSlug}
             comment={comment}
             activityOperations={activityOperations}
-            ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined}
+            ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
             showAccessSpecifier={!!showAccessSpecifier}
             showCopyLinkOption
             disabled={disabled}
@@ -65,12 +69,12 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
         ) : activityComment.activity_type === "ACTIVITY" ? (
           <IssueActivityItem
             activityId={activityComment.id}
-            ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined}
+            ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
           />
         ) : activityComment.activity_type === "ISSUE_ADDITIONAL_PROPERTIES_ACTIVITY" ? (
           <IssueAdditionalPropertiesActivity
             activityId={activityComment.id}
-            ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined}
+            ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
           />
         ) : activityComment.activity_type === "WORKLOG" ? (
           <IssueActivityWorklog
@@ -78,7 +82,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
             projectId={projectId}
             issueId={issueId}
             activityComment={activityComment}
-            ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined}
+            ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
           />
         ) : (
           <></>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
new file mode 100644
index 0000000000..915b5b207b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
@@ -0,0 +1,31 @@
+// plane imports
+import { Loader } from "@plane/ui";
+
+export const IssueActivityLoader = () => (
+  <Loader className="space-y-8">
+    <div className="flex items-start gap-3">
+      <Loader.Item className="shrink-0" height="28px" width="28px" />
+      <div className="space-y-2 w-full">
+        <Loader.Item height="8px" width="60%" />
+        <Loader.Item height="8px" width="40%" />
+        <Loader.Item height="10px" width="100%" />
+      </div>
+    </div>
+    <div className="flex items-start gap-3">
+      <Loader.Item className="shrink-0" height="28px" width="28px" />
+      <div className="space-y-2 w-full">
+        <Loader.Item height="8px" width="40%" />
+        <Loader.Item height="8px" width="60%" />
+        <Loader.Item height="10px" width="80%" />
+      </div>
+    </div>
+    <div className="flex items-start gap-3">
+      <Loader.Item className="shrink-0" height="28px" width="28px" />
+      <div className="space-y-2 w-full">
+        <Loader.Item height="8px" width="60%" />
+        <Loader.Item height="8px" width="40%" />
+        <Loader.Item height="10px" width="100%" />
+      </div>
+    </div>
+  </Loader>
+);