ISS-55

apps/console/src/app/(protected)/control-report/loading.tsx

@@ -1,8 +1,8 @@
-import { Loading } from '@/components/shared/loading/loading'
+import { ControlReportPageSkeleton } from '@/components/pages/protected/control-report/skeleton/control-report-page-skeleton'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <ControlReportPageSkeleton />
 }
 
 export default Loader

apps/console/src/app/(protected)/controls/[id]/loading.tsx

@@ -1,8 +1,8 @@
-import { Loading } from '@/components/shared/loading/loading'
+import { ObjectWithDetailsSkeleton } from '@/components/shared/skeleton/object-with-slideout-skeleton'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <ObjectWithDetailsSkeleton />
 }
 
 export default Loader

apps/console/src/app/(protected)/controls/[id]/page.tsx

@@ -42,6 +42,7 @@ import { useOrganization } from '@/hooks/useOrganization'
 import ObjectAssociationSwitch from '@/components/shared/object-association/object-association-switch.tsx'
 import { ObjectAssociationNodeEnum } from '@/components/shared/object-association/types/object-association-types.ts'
 import { AccessEnum } from '@/lib/authz/enums/access-enum.ts'
+import Loading from './loading.tsx'
 
 interface FormValues {
   refCode: string
@@ -220,7 +221,9 @@ const ControlDetailsPage: React.FC = () => {
     }
   }, [data?.control, form])
 
-  if (isLoading) return <div className="p-4 text-muted-foreground">Loading...</div>
+  if (isLoading) {
+    return <Loading />
+  }
   if (isError || !data?.control) return <div className="p-4 text-red-500">Control not found</div>
   const control = data?.control
   const hasInfoData = control.implementationGuidance || control.exampleEvidence || control.controlQuestions || control.assessmentMethods || control.assessmentObjectives

apps/console/src/app/(protected)/dashboard/loading.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DashboardSkeleton from '@/app/(protected)/dashboard/dashboard-skeleton.tsx'
+import DashboardSkeleton from '@/components/pages/protected/dashboard/skeleton/dashboard-skeleton'
 
 const Loader: React.FC = () => {
   return <DashboardSkeleton />

apps/console/src/app/(protected)/evidence/loading.tsx

@@ -1,8 +1,8 @@
-import { Loading } from '@/components/shared/loading/loading'
+import { EvidenceSkeleton } from '@/components/pages/protected/evidence/skeleton/evidence-skeleton'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <EvidenceSkeleton />
 }
 
 export default Loader

apps/console/src/app/(protected)/policies/[id]/view/loading.tsx

@@ -0,0 +1,8 @@
+import { ObjectWithDetailsSkeleton } from '@/components/shared/skeleton/object-with-slideout-skeleton'
+import React from 'react'
+
+const Loader: React.FC = () => {
+  return <ObjectWithDetailsSkeleton />
+}
+
+export default Loader

apps/console/src/app/(protected)/policies/loading.tsx

@@ -1,8 +1,7 @@
-import { Loading } from '@/components/shared/loading/loading'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <></>
 }
 
 export default Loader

apps/console/src/app/(protected)/procedures/[id]/view/loading.tsx

@@ -0,0 +1,8 @@
+import { ObjectWithDetailsSkeleton } from '@/components/shared/skeleton/object-with-slideout-skeleton'
+import React from 'react'
+
+const Loader: React.FC = () => {
+  return <ObjectWithDetailsSkeleton />
+}
+
+export default Loader

apps/console/src/app/(protected)/procedures/loading.tsx

@@ -1,8 +1,7 @@
-import { Loading } from '@/components/shared/loading/loading'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <></>
 }
 
 export default Loader

apps/console/src/app/(protected)/programs/loading.tsx

@@ -1,8 +1,8 @@
-import { Loading } from '@/components/shared/loading/loading'
+import { ProgramsPageSkeleton } from '@/components/pages/protected/program/skeleton/programs-page-skeleton'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <ProgramsPageSkeleton />
 }
 
 export default Loader

apps/console/src/app/(protected)/risks/[id]/loading.tsx

@@ -1,8 +1,8 @@
-import { Loading } from '@/components/shared/loading/loading'
+import { ObjectWithDetailsSkeleton } from '@/components/shared/skeleton/object-with-slideout-skeleton'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <ObjectWithDetailsSkeleton />
 }
 
 export default Loader

apps/console/src/app/(protected)/standards/[id]/loading.tsx

@@ -1,8 +1,8 @@
-import { Loading } from '@/components/shared/loading/loading'
+import { ObjectWithDetailsSkeleton } from '@/components/shared/skeleton/object-with-slideout-skeleton'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <ObjectWithDetailsSkeleton />
 }
 
 export default Loader

apps/console/src/app/(protected)/standards/[id]/page.tsx

@@ -3,7 +3,6 @@
 import { PageHeading } from '@repo/ui/page-heading'
 import { useParams } from 'next/navigation'
 import { useGetStandardDetails } from '@/lib/graphql-hooks/standards'
-import { Loading } from '@/components/shared/loading/loading'
 import StandardDetailsCard from '@/components/pages/protected/standards/standard-details-card'
 import StandardDetailsAccordion from '@/components/pages/protected/standards/standard-details-accordion'
 import { useEffect, useContext, useState } from 'react'
@@ -15,6 +14,7 @@ import { Button } from '@repo/ui/button'
 import { canEdit } from '@/lib/authz/utils.ts'
 import { useSession } from 'next-auth/react'
 import { useOrganizationRole } from '@/lib/authz/access-api'
+import Loading from './loading'
 
 const StandardDetailsPage = () => {
   const { id } = useParams()

apps/console/src/app/(protected)/standards/loading.tsx

@@ -1,8 +1,8 @@
-import { Loading } from '@/components/shared/loading/loading'
+import { StandardsPageSkeleton } from '@/components/pages/protected/standards/skeleton/standards-page-skeleton'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <StandardsPageSkeleton />
 }
 
 export default Loader

apps/console/src/app/(protected)/tasks/loading.tsx

@@ -1,8 +1,7 @@
-import { Loading } from '@/components/shared/loading/loading'
 import React from 'react'
 
 const Loader: React.FC = () => {
-  return <Loading />
+  return <></>
 }
 
 export default Loader

apps/console/src/components/pages/programs/programs-tasks-table.tsx

@@ -3,10 +3,8 @@
 import React, { useMemo, useState } from 'react'
 import Link from 'next/link'
 import { formatDate } from '@/utils/date'
-import { Users2Icon } from 'lucide-react'
 import { Button } from '@repo/ui/button'
 import { DataTable } from '@repo/ui/data-table'
-import { TableCell, TableRow } from '@repo/ui/table'
 import { ColumnDef } from '@tanstack/table-core'
 import { Avatar } from '@/components/shared/avatar/avatar'
 import { useTasksWithFilter } from '@/lib/graphql-hooks/tasks'
@@ -146,16 +144,6 @@ const TasksTable = () => {
         loading={isLoading}
         sortFields={TASK_SORT_FIELDS}
         onSortChange={setOrderBy}
-        noDataMarkup={
-          <TableRow>
-            <TableCell colSpan={columns.length}>
-              <div className="flex flex-col justify-center items-center py-8">
-                <Users2Icon size={89} strokeWidth={1} className="text-border mb-4" />
-                <p className="text-sm text-muted-foreground">No tasks found</p>
-              </div>
-            </TableCell>
-          </TableRow>
-        }
       />
     </div>
   )

apps/console/src/components/pages/protected/control-report/control-report-page.tsx

@@ -17,13 +17,13 @@ import Link from 'next/link'
 import { Button } from '@repo/ui/button'
 import { PercentageDonut } from '@/components/shared/percentage-donut.tsx/percentage-donut'
 import { useRouter } from 'next/navigation'
-import { Loading } from '@/components/shared/loading/loading'
 import { CreateButton } from '@/components/shared/create-button/create-button'
 
 import { useSession } from 'next-auth/react'
 import { canCreate } from '@/lib/authz/utils'
 import { useOrganizationRole } from '@/lib/authz/access-api'
 import { AccessEnum } from '@/lib/authz/enums/access-enum'
+import Loading from '@/app/(protected)/control-report/loading'
 
 const ControlReportPage = () => {
   const { currentOrgId } = useOrganization()
@@ -135,7 +135,6 @@ const ControlReportPage = () => {
       setReferenceFramework(first || 'Custom')
     }
   }, [standardOptions, isSuccessStandards])
-
   if (isLoading || !data) {
     return <Loading />
   }
@@ -174,7 +173,7 @@ const ControlReportPage = () => {
       </div>
       <div className="space-y-2">
         {isLoading || isFetching ? (
-          <p>Loading controls...</p>
+          <Loading />
         ) : !data || data.length === 0 ? (
           <>
             <div className="flex flex-col items-center justify-center mt-16 gap-6">

apps/console/src/components/pages/protected/control-report/skeleton/control-report-page-skeleton.tsx

@@ -0,0 +1,98 @@
+import Skeleton from '@/components/shared/skeleton/skeleton'
+
+export const ControlReportPageSkeleton = () => {
+  return (
+    <div className="flex flex-col mt-2 gap-4">
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+      <div className="flex justify-between gap-7">
+        <div className="flex w-1/2 gap-7">
+          <Skeleton height={20} width={20} />
+          <Skeleton height={20} width="80%" />
+        </div>
+        <div className="ml-auto">
+          <Skeleton height={50} width={50} className="rounded-full" />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/console/src/components/pages/protected/controls/control-evidence/evidence-details-sheet.tsx

@@ -25,7 +25,6 @@ import {
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@repo/ui/sheet'
 import { Input, InputRow } from '@repo/ui/input'
 import { useNotification } from '@/hooks/useNotification'
-import { Loading } from '@/components/shared/loading/loading'
 import { Badge } from '@repo/ui/badge'
 import { Form, FormControl, FormField, FormItem, FormLabel } from '@repo/ui/form'
 import { SystemTooltip } from '@repo/ui/system-tooltip'
@@ -61,6 +60,7 @@ import useEscapeKey from '@/hooks/useEscapeKey'
 import useClickOutsideWithPortal from '@/hooks/useClickOutsideWithPortal'
 import { parseErrorMessage } from '@/utils/graphQlErrorMatcher'
 import { ObjectEnum } from '@/lib/authz/enums/object-enum'
+import { EvidenceDetailsSheetSkeleton } from '../../evidence/skeleton/evidence-details-skeleton'
 
 type TEvidenceDetailsSheet = {
   controlId?: string
@@ -389,7 +389,7 @@ const EvidenceDetailsSheet: React.FC<TEvidenceDetailsSheet> = ({ controlId }) =>
         }
       >
         {fetching ? (
-          <Loading />
+          <EvidenceDetailsSheetSkeleton />
         ) : (
           <>
             <Form {...form}>

apps/console/src/components/pages/protected/dashboard/dashboard-page.tsx

@@ -17,12 +17,12 @@ import { useSession } from 'next-auth/react'
 import { useOrganizationRole } from '@/lib/authz/access-api.ts'
 import { canCreate } from '@/lib/authz/utils.ts'
 import { AccessEnum } from '@/lib/authz/enums/access-enum.ts'
-import DashboardSkeleton from '@/app/(protected)/dashboard/dashboard-skeleton.tsx'
 import Menu from '@/components/shared/menu/menu.tsx'
 import { TaskIconBtn } from '@/components/shared/enum-mapper/task-enum'
 import { ProgramCreateIconBtn } from '@/components/shared/enum-mapper/program-enum'
 import { CreateBtn } from '@/components/shared/enum-mapper/common-enum'
 import { BreadcrumbContext } from '@/providers/BreadcrumbContext.tsx'
+import Loading from '@/app/(protected)/dashboard/loading'
 
 const DashboardPage: React.FC = () => {
   const router = useRouter()
@@ -74,7 +74,7 @@ const DashboardPage: React.FC = () => {
   }
 
   if (isLoading) {
-    return <DashboardSkeleton />
+    return <Loading />
   }
 
   if (!data?.programs.edges?.length) {