diff --git a/src/layouts/ReviewRequest/Dashboard.stories.tsx b/src/layouts/ReviewRequest/Dashboard.stories.tsx
index e90485bb9..26cf6f6c6 100644
--- a/src/layouts/ReviewRequest/Dashboard.stories.tsx
+++ b/src/layouts/ReviewRequest/Dashboard.stories.tsx
@@ -16,7 +16,7 @@ import { markReviewRequestAsViewedHandler } from "../../mocks/handlers"
 import { ReviewRequestDashboard } from "./Dashboard"
 
 const dashboardMeta = {
-  title: "Components/ReviewRequest/Dashboard",
+  title: "Pages/ReviewRequest",
   component: ReviewRequestDashboard,
   parameters: {
     msw: {
@@ -51,6 +51,19 @@ const dashboardMeta = {
 
 const Template = ReviewRequestDashboard
 
-export const Playground: Story = Template.bind({})
+export const Default: Story = Template.bind({})
 
+export const Loading: Story = Template.bind({})
+Loading.parameters = {
+  msw: {
+    handlers: {
+      reviewRequest: buildReviewRequestData(
+        {
+          reviewRequest: MOCK_REVIEW_REQUEST,
+        },
+        "infinite"
+      ),
+    },
+  },
+}
 export default dashboardMeta
diff --git a/src/layouts/ReviewRequest/Dashboard.tsx b/src/layouts/ReviewRequest/Dashboard.tsx
index 90c285fca..ba289d891 100644
--- a/src/layouts/ReviewRequest/Dashboard.tsx
+++ b/src/layouts/ReviewRequest/Dashboard.tsx
@@ -14,6 +14,7 @@ import {
   PopoverArrow,
   IconButton,
   useDisclosure,
+  Skeleton,
 } from "@chakra-ui/react"
 import { Button } from "@opengovsg/design-system-react"
 import { Footer } from "components/Footer"
@@ -58,7 +59,6 @@ export const ReviewRequestDashboard = (): JSX.Element => {
   const { onOpen, isOpen, onClose } = useDisclosure()
   // TODO!: redirect to /sites if cannot parse reviewId as string
   const prNumber = parseInt(reviewId, 10)
-  // TODO!: Refactor so that loading is not a concern here
   const { data, isLoading: isGetReviewRequestLoading } = useGetReviewRequest(
     siteName,
     prNumber
@@ -69,7 +69,6 @@ export const ReviewRequestDashboard = (): JSX.Element => {
   const {
     mutateAsync: updateReviewRequestViewed,
   } = useUpdateReviewRequestViewed()
-  // TODO!: redirect to /sites if cannot parse reviewId as string
   const {
     mutateAsync: mergeReviewRequest,
     isLoading: isMergingReviewRequest,
@@ -92,8 +91,8 @@ export const ReviewRequestDashboard = (): JSX.Element => {
   }, [reviewStatus, setRedirectToPage, siteName])
 
   useEffect(() => {
-    updateReviewRequestViewed({ siteName, prNumber: parseInt(reviewId, 10) })
-  }, [reviewId, siteName, updateReviewRequestViewed])
+    updateReviewRequestViewed({ siteName, prNumber })
+  }, [prNumber, siteName, updateReviewRequestViewed])
 
   return (
     <>
@@ -116,7 +115,13 @@ export const ReviewRequestDashboard = (): JSX.Element => {
           >
             <Flex w="100%">
               <HStack spacing="0.25rem">
-                <Text textStyle="h5">{data?.title || ""}</Text>
+                <Skeleton
+                  isLoaded={!isGetReviewRequestLoading}
+                  minW="10rem"
+                  minH="1rem"
+                >
+                  <Text textStyle="h5">{data?.title}</Text>
+                </Skeleton>
                 {/* Closes after 1.5s and does not refocus on the button to avoid the outline */}
                 <Popover returnFocusOnClose={false} isOpen={hasCopied}>
                   <PopoverTrigger>
@@ -125,6 +130,7 @@ export const ReviewRequestDashboard = (): JSX.Element => {
                       variant="clear"
                       aria-label="link to pull request"
                       onClick={onCopy}
+                      isLoading={isGetReviewRequestLoading}
                     />
                   </PopoverTrigger>
                   <PopoverContent
@@ -150,20 +156,30 @@ export const ReviewRequestDashboard = (): JSX.Element => {
                 <ApprovalButton isApproved={isApproved} />
               )}
             </Flex>
-            <SecondaryDetails
-              requestor={data?.requestor || ""}
-              reviewers={data?.reviewers || []}
-              reviewRequestedTime={
-                data?.reviewRequestedTime
-                  ? new Date(data?.reviewRequestedTime)
-                  : new Date()
-              }
-              admins={
-                collaborators
-                  ?.filter((user) => user.role === "ADMIN")
-                  .map(({ email }) => email) || []
+            <Skeleton
+              isLoaded={
+                !!(
+                  data?.requestor &&
+                  data?.reviewers &&
+                  data?.reviewRequestedTime
+                )
               }
-            />
+            >
+              <SecondaryDetails
+                requestor={data?.requestor || ""}
+                reviewers={data?.reviewers || []}
+                reviewRequestedTime={
+                  data?.reviewRequestedTime
+                    ? new Date(data?.reviewRequestedTime)
+                    : new Date()
+                }
+                admins={
+                  collaborators
+                    ?.filter((user) => user.role === "ADMIN")
+                    .map(({ email }) => email) || []
+                }
+              />
+            </Skeleton>
           </VStack>
           <Flex h="100%" w="7.25rem" pt="2rem" justifyContent="end">
             {/* TODO: swap this to a slide out component and not a drawer */}
@@ -171,7 +187,9 @@ export const ReviewRequestDashboard = (): JSX.Element => {
           </Flex>
         </HStack>
         <Box pl="9.25rem" pr="2rem">
-          <RequestOverview items={data?.changedItems || []} allowEditing />
+          <Skeleton isLoaded={!isGetReviewRequestLoading}>
+            <RequestOverview items={data?.changedItems || []} allowEditing />
+          </Skeleton>
         </Box>
         {isApproved && (
           <Footer>