From 607401d06c6daba2982484af6473888a5ba10114 Mon Sep 17 00:00:00 2001
From: Sam David <samd948@gmail.com>
Date: Mon, 13 Jan 2025 11:24:44 +0530
Subject: [PATCH] Increase Page Transition Speed

---
 .../details/skeleton-loader/index.hbs         |  88 +++++++++++++++
 .../details/skeleton-loader/index.scss        |  41 +++++++
 .../details/skeleton-loader/index.ts          |   9 ++
 .../app-monitoring/skeleton-loader/index.hbs  |  40 +++++++
 .../app-monitoring/skeleton-loader/index.scss |  17 +++
 .../app-monitoring/skeleton-loader/index.ts   |   9 ++
 .../file-compare/skeleton-loader/index.hbs    |  63 +++++++++++
 .../file-compare/skeleton-loader/index.scss   |  18 +++
 .../file-compare/skeleton-loader/index.ts     |   9 ++
 .../settings/skeleton-loader/index.hbs        | 103 ++++++++++++++++++
 .../settings/skeleton-loader/index.scss       |  43 ++++++++
 .../settings/skeleton-loader/index.ts         |  18 +++
 .../index.hbs                                 |  20 +++-
 .../skeleton-loader/index.hbs                 |  31 ++++++
 .../skeleton-loader/index.scss                |  12 ++
 .../skeleton-loader/index.ts                  |   9 ++
 .../scan-details/skeleton-loader/index.hbs    |  35 ++++++
 .../scan-details/skeleton-loader/index.scss   |  10 ++
 .../scan-details/skeleton-loader/index.ts     |   9 ++
 app/styles/_component-variables.scss          |  42 +++++++
 .../app-monitoring/index-loading.hbs          |   5 +
 .../dashboard/app-monitoring/index.hbs        |   2 +-
 .../monitoring-details-loading.hbs            |   5 +
 .../app-monitoring/monitoring-details.hbs     |   2 +-
 .../dashboard/compare-loading.hbs             |   5 +
 .../authenticated/dashboard/compare.hbs       |   2 +-
 .../authenticated/dashboard/compare/index.hbs |   2 +-
 .../dashboard/compare/new-issues.hbs          |   2 +-
 .../compare/untested-cases-loading.hbs        |   3 +
 .../dashboard/compare/untested-cases.hbs      |   2 +-
 .../organization-settings/index-loading.hbs   |   3 +
 .../sbom/component-details-loading.hbs        |   3 +
 .../dashboard/sbom/component-details.hbs      |   2 +-
 .../dashboard/sbom/scan-details-loading.hbs   |   3 +
 .../dashboard/sbom/scan-details.hbs           |   2 +-
 translations/en.json                          |   1 +
 translations/ja.json                          |   1 +
 37 files changed, 662 insertions(+), 9 deletions(-)
 create mode 100644 app/components/app-monitoring/details/skeleton-loader/index.hbs
 create mode 100644 app/components/app-monitoring/details/skeleton-loader/index.scss
 create mode 100644 app/components/app-monitoring/details/skeleton-loader/index.ts
 create mode 100644 app/components/app-monitoring/skeleton-loader/index.hbs
 create mode 100644 app/components/app-monitoring/skeleton-loader/index.scss
 create mode 100644 app/components/app-monitoring/skeleton-loader/index.ts
 create mode 100644 app/components/file-compare/skeleton-loader/index.hbs
 create mode 100644 app/components/file-compare/skeleton-loader/index.scss
 create mode 100644 app/components/file-compare/skeleton-loader/index.ts
 create mode 100644 app/components/organization/settings/skeleton-loader/index.hbs
 create mode 100644 app/components/organization/settings/skeleton-loader/index.scss
 create mode 100644 app/components/organization/settings/skeleton-loader/index.ts
 create mode 100644 app/components/sbom/component-details/skeleton-loader/index.hbs
 create mode 100644 app/components/sbom/component-details/skeleton-loader/index.scss
 create mode 100644 app/components/sbom/component-details/skeleton-loader/index.ts
 create mode 100644 app/components/sbom/scan-details/skeleton-loader/index.hbs
 create mode 100644 app/components/sbom/scan-details/skeleton-loader/index.scss
 create mode 100644 app/components/sbom/scan-details/skeleton-loader/index.ts
 create mode 100644 app/templates/authenticated/dashboard/app-monitoring/index-loading.hbs
 create mode 100644 app/templates/authenticated/dashboard/app-monitoring/monitoring-details-loading.hbs
 create mode 100644 app/templates/authenticated/dashboard/compare-loading.hbs
 create mode 100644 app/templates/authenticated/dashboard/compare/untested-cases-loading.hbs
 create mode 100644 app/templates/authenticated/dashboard/organization-settings/index-loading.hbs
 create mode 100644 app/templates/authenticated/dashboard/sbom/component-details-loading.hbs
 create mode 100644 app/templates/authenticated/dashboard/sbom/scan-details-loading.hbs

diff --git a/app/components/app-monitoring/details/skeleton-loader/index.hbs b/app/components/app-monitoring/details/skeleton-loader/index.hbs
new file mode 100644
index 000000000..2568aac96
--- /dev/null
+++ b/app/components/app-monitoring/details/skeleton-loader/index.hbs
@@ -0,0 +1,88 @@
+<AkSkeleton @width='250px' @height='14px' class='mt-2' />
+
+<AkStack
+  @direction='column'
+  @width='full'
+  local-class='app-details-container'
+  class='pt-3'
+>
+  <AkStack
+    @direction='column'
+    @tag='section'
+    @width='full'
+    local-class='app-details-wrapper'
+  >
+    <AkStack
+      @direction='row'
+      @justifyContent='space-between'
+      @alignItems='stretch'
+      @width='full'
+      local-class='overview-container'
+    >
+      <AkStack @direction='column' @tag='article'>
+        <AkStack @direction='row' @spacing='1.5' local-class='overview-icons'>
+          <AkSkeleton @width='40px' @height='40px' />
+
+          <AkSkeleton @width='40px' @height='40px' />
+        </AkStack>
+
+        <AkSkeleton @width='100px' @height='20px' class='mb-1' />
+
+        <AkSkeleton @width='200px' @height='16px' />
+      </AkStack>
+
+      <AkStack
+        @direction='column'
+        @alignItems='flex-start'
+        @justifyContent='center'
+        local-class='monitoring-toggle-container'
+      >
+        <AkSkeleton @width='125px' @height='16px' class='mb-1' />
+
+        <AkStack @alignItems='center' @spacing='1'>
+          <AkSkeleton @width='35px' @height='20px' class='mb-1' />
+        </AkStack>
+      </AkStack>
+    </AkStack>
+
+    <AkStack @direction='column' local-class='monitoring-details-container'>
+      <div local-class='monitoring-details-group'>
+        <AkStack>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='30px' @height='16px' />
+        </AkStack>
+
+        <AkStack>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='100px' @height='16px' />
+        </AkStack>
+      </div>
+
+      <div local-class='monitoring-details-group'>
+        <AkStack>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='40px' @height='16px' />
+        </AkStack>
+
+        <AkStack class='mb-2'>
+          <AkSkeleton @width='145px' @height='16px' class='mr-2' />
+
+          <AkSkeleton @width='60px' @height='16px' />
+        </AkStack>
+      </div>
+    </AkStack>
+  </AkStack>
+
+  <AkStack class='mt-2 ml-2'>
+    <AkSkeleton @width='140px' @height='20px' class='mr-3' />
+
+    <AkSkeleton @width='140px' @height='20px' />
+  </AkStack>
+</AkStack>
+
+<AkSkeleton @width='500px' @height='20px' class='ml-2 mb-2' />
+
+<AppMonitoring::Loading @loadingText='{{t "loading"}}...' />
\ No newline at end of file
diff --git a/app/components/app-monitoring/details/skeleton-loader/index.scss b/app/components/app-monitoring/details/skeleton-loader/index.scss
new file mode 100644
index 000000000..3c62707b2
--- /dev/null
+++ b/app/components/app-monitoring/details/skeleton-loader/index.scss
@@ -0,0 +1,41 @@
+.app-details-container {
+  padding-bottom: 1.3571em;
+
+  .app-details-wrapper {
+    padding: 1.5em;
+    border: 1px solid var(--appmonitoring-details-skeleton-loader-border-color);
+    margin-bottom: 1.5714em;
+
+    .overview-container {
+      height: fit-content;
+      margin-bottom: 1.4286em;
+
+      .overview-icons {
+        margin-bottom: 0.857em;
+      }
+
+      .monitoring-toggle-container {
+        border-left: 1px solid
+          var(--appmonitoring-details-skeleton-loader-toggle-border-color);
+        padding-left: 1.214em;
+      }
+    }
+
+    .monitoring-details-container {
+      width: 100%;
+
+      .monitoring-details-group {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 400px);
+
+        &:first-of-type {
+          border-bottom: 1px solid
+            var(--appmonitoring-details-skeleton-loader-border-color);
+          padding-bottom: 0.6428em;
+          margin-bottom: 0.6428em;
+        }
+      }
+    }
+  }
+}
diff --git a/app/components/app-monitoring/details/skeleton-loader/index.ts b/app/components/app-monitoring/details/skeleton-loader/index.ts
new file mode 100644
index 000000000..1475e73df
--- /dev/null
+++ b/app/components/app-monitoring/details/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class AppMonitoringDetailsSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'AppMonitoring::Details::SkeletonLoader': typeof AppMonitoringDetailsSkeletonLoaderComponent;
+  }
+}
diff --git a/app/components/app-monitoring/skeleton-loader/index.hbs b/app/components/app-monitoring/skeleton-loader/index.hbs
new file mode 100644
index 000000000..16a0eb9f8
--- /dev/null
+++ b/app/components/app-monitoring/skeleton-loader/index.hbs
@@ -0,0 +1,40 @@
+<AkStack
+  @width='full'
+  @direction='column'
+  local-class='header-app-moitoring-page'
+>
+  <AkStack
+    @width='full'
+    @justifyContent='space-between'
+    @alignItems='center'
+    @spacing='1.5'
+    local-class='header-app-moitoring-page-title'
+  >
+    <AkStack @direction='column' @spacing='0.5'>
+      <AkSkeleton @width='100px' @height='20px' class='mb-1' />
+
+      <AkSkeleton @width='650px' @height='15px' />
+
+      <AkSkeleton @width='250px' @height='15px' />
+    </AkStack>
+
+    <AkSkeleton @width='35px' @height='16px' />
+  </AkStack>
+
+  <AkDivider @color='dark' />
+
+  <AkStack
+    @alignItems='center'
+    @justifyContent='space-between'
+    @width='full'
+    local-class='header-app-moitoring-page-sorting-filter'
+  >
+    <AkSkeleton @width='115px' @height='32px' />
+
+    <AkSkeleton @width='200px' @height='30px' />
+  </AkStack>
+</AkStack>
+
+<div local-class='app-monitoring-table-container'>
+  <AppMonitoring::Loading @loadingText='{{t "loading"}}...' />
+</div>
\ No newline at end of file
diff --git a/app/components/app-monitoring/skeleton-loader/index.scss b/app/components/app-monitoring/skeleton-loader/index.scss
new file mode 100644
index 000000000..99f928772
--- /dev/null
+++ b/app/components/app-monitoring/skeleton-loader/index.scss
@@ -0,0 +1,17 @@
+.header-app-moitoring-page {
+  border: 1px solid var(--appmonitoring-skeleton-loader-header-border-color);
+  border-radius: var(--appmonitoring-skeleton-loader-header-border-radius);
+  padding-top: 0.714em;
+
+  .header-app-moitoring-page-title {
+    padding: 1em 1.285em;
+  }
+}
+
+.header-app-moitoring-page-sorting-filter {
+  padding: 0.785em 1.285em;
+}
+
+.app-monitoring-table-container {
+  margin-top: 1.25em;
+}
diff --git a/app/components/app-monitoring/skeleton-loader/index.ts b/app/components/app-monitoring/skeleton-loader/index.ts
new file mode 100644
index 000000000..dbfa0a1b6
--- /dev/null
+++ b/app/components/app-monitoring/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class AppMonitoringSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'AppMonitoring::SkeletonLoader': typeof AppMonitoringSkeletonLoaderComponent;
+  }
+}
diff --git a/app/components/file-compare/skeleton-loader/index.hbs b/app/components/file-compare/skeleton-loader/index.hbs
new file mode 100644
index 000000000..27a0f06f9
--- /dev/null
+++ b/app/components/file-compare/skeleton-loader/index.hbs
@@ -0,0 +1,63 @@
+<AkSkeleton @width='250px' @height='16px' class='mt-2 mb-3' />
+
+<AkStack @direction='column' @width='full'>
+  <AkStack
+    @width='full'
+    @justifyContent='space-between'
+    @alignItems='center'
+    local-class='file-compare-header-project-overview'
+  >
+    <AkStack @width='full' @alignItems='center' @spacing='1.5'>
+      <AkStack @alignItems='center' @spacing='1'>
+        <AkSkeleton @width='25px' @height='25px' />
+
+        <AkSkeleton @width='75px' @height='16px' />
+      </AkStack>
+
+      <AkDivider @direction='vertical' @height='26px' />
+
+      <AkStack @alignItems='center' @spacing='0.5'>
+        <AkSkeleton @width='25px' @height='25px' />
+
+        <AkSkeleton @width='75px' @height='16px' />
+      </AkStack>
+
+      <AkDivider @direction='vertical' @height='26px' />
+
+      <AkStack @alignItems='center'>
+        <AkSkeleton @width='25px' @height='25px' />
+      </AkStack>
+    </AkStack>
+  </AkStack>
+
+  <AkStack
+    @width='full'
+    @justifyContent='space-between'
+    @alignItems='center'
+    local-class='file-compare-header-info'
+  >
+    <AkStack @direction='column' @spacing='1.5'>
+      <AkSkeleton @width='75px' @height='22px' />
+
+      <AkSkeleton @width='200px' @height='16px' />
+    </AkStack>
+
+    <AkSkeleton @width='25px' @height='25px' />
+  </AkStack>
+</AkStack>
+
+<div local-class='file-compare-tabs' class='pb-3'>
+  <AkStack @spacing='6' class='p-2'>
+    <AkSkeleton @width='100px' @height='16px' />
+
+    <AkSkeleton @width='100px' @height='16px' />
+
+    <AkSkeleton @width='100px' @height='16px' />
+
+    <AkSkeleton @width='100px' @height='16px' />
+  </AkStack>
+
+  <AkDivider @color='dark' />
+</div>
+
+<FileCompare::Loader @loadingText='{{t "loading"}}...' />
\ No newline at end of file
diff --git a/app/components/file-compare/skeleton-loader/index.scss b/app/components/file-compare/skeleton-loader/index.scss
new file mode 100644
index 000000000..1c54d29b4
--- /dev/null
+++ b/app/components/file-compare/skeleton-loader/index.scss
@@ -0,0 +1,18 @@
+.file-compare-header-project-overview {
+  background-color: var(--file-compare-skeleton-loader-background-color);
+  border: 1px solid var(--file-compare-skeleton-loader-border-color);
+  padding: 1em 1.5em;
+}
+
+.file-compare-header-info {
+  padding: 1.4286em;
+  border: 1px solid var(--file-compare-skeleton-loader-border-color);
+  border-top: none;
+  box-shadow: var(--file-compare-skeleton-loader-box-shadow);
+  background-color: var(--file-compare-skeleton-loader-background-color);
+}
+
+.file-compare-tabs {
+  margin-top: 1.4286em;
+  background: var(--file-compare-skeleton-loader-background-color);
+}
diff --git a/app/components/file-compare/skeleton-loader/index.ts b/app/components/file-compare/skeleton-loader/index.ts
new file mode 100644
index 000000000..e4cc2300b
--- /dev/null
+++ b/app/components/file-compare/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class FileCompareSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'FileCompare::SkeletonLoader': typeof FileCompareSkeletonLoaderComponent;
+  }
+}
diff --git a/app/components/organization/settings/skeleton-loader/index.hbs b/app/components/organization/settings/skeleton-loader/index.hbs
new file mode 100644
index 000000000..db59b5214
--- /dev/null
+++ b/app/components/organization/settings/skeleton-loader/index.hbs
@@ -0,0 +1,103 @@
+<div local-class='org-settings-container'>
+  {{#if this.me.org.is_admin}}
+    <AkSkeleton @width='175px' @height='20px' class='mb-2' />
+
+    <AkStack @direction='column' @spacing='1'>
+      <AkSkeleton @width='300px' @height='14px' />
+
+      <AkSkeleton @width='400px' @height='12px' />
+    </AkStack>
+
+    <div class='mt-5'>
+      {{#each (array 0 1 2 3 4)}}
+        <AkStack @direction='row' @alignItems='center'>
+          <AkSkeleton @width='18px' @height='18px' class='m-1' />
+
+          <AkSkeleton @width='75px' @height='14px' />
+        </AkStack>
+      {{/each}}
+    </div>
+
+    <AkDivider class='my-3' @color='dark' />
+
+    <AkSkeleton @width='175px' @height='20px' class='mb-2' />
+
+    <AkStack @direction='column' @spacing='1'>
+      <AkSkeleton @width='300px' @height='14px' />
+
+      <AkStack @direction='column' @spacing='0.5'>
+        <AkSkeleton @width='400px' @height='12px' />
+
+        <AkSkeleton @width='400px' @height='12px' />
+      </AkStack>
+    </AkStack>
+
+    <AkStack @spacing='1' class='my-4'>
+      <AkSkeleton @width='35px' @height='16px' />
+
+      <AkSkeleton @width='200px' @height='16px' />
+    </AkStack>
+
+    <AkSkeleton @width='450px' @height='50px' class='mb-2' />
+
+    <AkDivider class='my-3' @color='dark' />
+  {{/if}}
+
+  <AkSkeleton @width='175px' @height='20px' class='mb-2' />
+
+  <AkStack @direction='column' @spacing='1'>
+    <AkSkeleton @width='300px' @height='14px' />
+
+    <AkStack @direction='column' @spacing='0.5'>
+      <AkSkeleton @width='400px' @height='12px' />
+
+      <AkSkeleton @width='400px' @height='12px' />
+    </AkStack>
+  </AkStack>
+
+  <div class='mt-4'>
+    <div local-class='bordered-box'>
+      <div class='p-2'>
+        <AkStack @direction='column' @spacing='1'>
+          <AkSkeleton @width='100px' @height='14px' />
+
+          <AkSkeleton @width='300px' @height='12px' />
+        </AkStack>
+      </div>
+
+      <AkDivider class='my-0' @color='dark' />
+
+      <div class='m-3'>
+        <AkStack @spacing='3'>
+          <AkSkeleton @width='140px' @height='20px' />
+
+          <AkSkeleton @width='140px' @height='20px' />
+        </AkStack>
+      </div>
+
+      <div class='m-2'>
+        <div local-class='bordered-box'>
+          {{#each (array 0 1 2)}}
+            <AkStack local-class='full-bordered-box-section'>
+              <div
+                class='w-4/12'
+                local-class='full-bordered-box-section-column'
+              >
+                <AkSkeleton @width='140px' @height='18px' />
+              </div>
+
+              <div
+                class='w-8/12'
+                local-class='full-bordered-box-section-column'
+              >
+                <AkSkeleton @width='140px' @height='18px' />
+              </div>
+            </AkStack>
+          {{/each}}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <AkDivider class='my-3' @color='dark' />
+</div>
\ No newline at end of file
diff --git a/app/components/organization/settings/skeleton-loader/index.scss b/app/components/organization/settings/skeleton-loader/index.scss
new file mode 100644
index 000000000..b4dc8b03f
--- /dev/null
+++ b/app/components/organization/settings/skeleton-loader/index.scss
@@ -0,0 +1,43 @@
+.org-settings-container {
+  background-color: var(
+    --organization-settings-skeleton-loader-background-color
+  );
+  margin-top: 1.5em;
+  padding: 1.5em 2em 5em 2em;
+  box-sizing: border-box;
+}
+
+.bordered-box {
+  border: 1px solid
+    var(--organization-settings-skeleton-loader-sso-border-color);
+  border-radius: var(--organization-settings-skeleton-loader-sso-border-radius);
+  box-sizing: border-box;
+
+  .bordered-box-section {
+    padding: 1em;
+    box-sizing: border-box;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid
+        var(--organization-settings-skeleton-loader-sso-border-color);
+    }
+  }
+
+  .full-bordered-box-section {
+    box-sizing: border-box;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid
+        var(--organization-settings-skeleton-loader-sso-border-color);
+    }
+
+    .full-bordered-box-section-column {
+      padding: 1em;
+
+      &:last-child {
+        border-left: 1px solid
+          var(--organization-settings-skeleton-loader-sso-border-color);
+      }
+    }
+  }
+}
diff --git a/app/components/organization/settings/skeleton-loader/index.ts b/app/components/organization/settings/skeleton-loader/index.ts
new file mode 100644
index 000000000..63c4b66f2
--- /dev/null
+++ b/app/components/organization/settings/skeleton-loader/index.ts
@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+import type MeService from 'irene/services/me';
+
+export default class OrganizationSettingsSkeletonLoaderComponent extends Component {
+  @service declare me: MeService;
+
+  get isOwnerOrAdmin() {
+    return this.me.org?.get('is_owner') || this.me.org?.get('is_admin');
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Organization::Settings::SkeletonLoader': typeof OrganizationSettingsSkeletonLoaderComponent;
+  }
+}
diff --git a/app/components/regulatory-preference-organization/index.hbs b/app/components/regulatory-preference-organization/index.hbs
index c3a4702bd..52b8b5766 100644
--- a/app/components/regulatory-preference-organization/index.hbs
+++ b/app/components/regulatory-preference-organization/index.hbs
@@ -1,4 +1,22 @@
-{{#if this.orgPreference.reportPreference}}
+{{#if this.fetchOrganizationPreference.isRunning}}
+  <AkSkeleton @width='175px' @height='20px' class='mb-2' />
+
+  <AkStack @direction='column' @spacing='1'>
+    <AkSkeleton @width='300px' @height='14px' />
+
+    <AkSkeleton @width='400px' @height='12px' />
+  </AkStack>
+
+  <div class='mt-5'>
+    {{#each (array 0 1 2 3 4)}}
+      <AkStack @direction='row' @alignItems='center'>
+        <AkSkeleton @width='18px' @height='18px' class='m-1' />
+
+        <AkSkeleton @width='75px' @height='14px' />
+      </AkStack>
+    {{/each}}
+  </div>
+{{else if this.orgPreference.reportPreference}}
   <div local-class='preferences-container' data-test-preferences>
     <AkTypography
       @gutterBottom={{true}}
diff --git a/app/components/sbom/component-details/skeleton-loader/index.hbs b/app/components/sbom/component-details/skeleton-loader/index.hbs
new file mode 100644
index 000000000..903ecb9e5
--- /dev/null
+++ b/app/components/sbom/component-details/skeleton-loader/index.hbs
@@ -0,0 +1,31 @@
+<AkSkeleton @width='250px' @height='14px' class='mt-2 mb-4' />
+
+<AkStack @direction='column' @spacing='1' class='mb-4'>
+  <AkSkeleton @width='100px' @height='20px' />
+
+  <AkSkeleton @width='250px' @height='14px' />
+</AkStack>
+
+<div local-class='summary-header-root' class='mb-3'>
+  <AkStack
+    @alignItems='center'
+    @justifyContent='space-between'
+    @spacing='1.5'
+    local-class='summary-header-container'
+  >
+    <AkStack @alignItems='center'>
+      <AkSkeleton @width='150px' @height='18px' />
+
+      <AkSkeleton @width='75px' @height='18px' class='ml-4' />
+    </AkStack>
+
+    <AkSkeleton @width='18px' @height='18px' />
+  </AkStack>
+</div>
+
+<Sbom::EmptyLoadingView
+  @empty={{false}}
+  @loading={{true}}
+  @loadingSvgHeight='200px'
+  @height='350px'
+/>
\ No newline at end of file
diff --git a/app/components/sbom/component-details/skeleton-loader/index.scss b/app/components/sbom/component-details/skeleton-loader/index.scss
new file mode 100644
index 000000000..a3b26ba76
--- /dev/null
+++ b/app/components/sbom/component-details/skeleton-loader/index.scss
@@ -0,0 +1,12 @@
+.summary-header-root {
+  border-radius: var(
+    --sbom-component-details-skeleton-loader-summary-border-radius
+  );
+  border: 1px solid
+    var(--sbom-component-details-skeleton-loader-summary-border-color);
+  box-sizing: border-box;
+
+  .summary-header-container {
+    padding: 1.25em 1em;
+  }
+}
diff --git a/app/components/sbom/component-details/skeleton-loader/index.ts b/app/components/sbom/component-details/skeleton-loader/index.ts
new file mode 100644
index 000000000..e883d1201
--- /dev/null
+++ b/app/components/sbom/component-details/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class SbomComponentDetailsSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Sbom::ComponentDetails::SkeletonLoader': typeof SbomComponentDetailsSkeletonLoaderComponent;
+  }
+}
diff --git a/app/components/sbom/scan-details/skeleton-loader/index.hbs b/app/components/sbom/scan-details/skeleton-loader/index.hbs
new file mode 100644
index 000000000..4a2922a66
--- /dev/null
+++ b/app/components/sbom/scan-details/skeleton-loader/index.hbs
@@ -0,0 +1,35 @@
+<AkSkeleton @width='250px' @height='14px' class='mt-2 mb-4' />
+
+<AkStack @direction='column' @spacing='1' class='mb-4'>
+  <AkSkeleton @width='100px' @height='20px' />
+
+  <AkSkeleton @width='250px' @height='14px' />
+</AkStack>
+
+<div local-class='summary-header-root' class='mb-3'>
+  <AkStack
+    @alignItems='center'
+    @justifyContent='space-between'
+    @spacing='1.5'
+    local-class='summary-header-container'
+  >
+    <AkStack @alignItems='center'>
+      <AkSkeleton @width='40px' @height='40px' />
+
+      <AkSkeleton @width='250px' @height='18px' class='ml-2' />
+    </AkStack>
+
+    <AkStack @alignItems='center' @spacing='1.5'>
+      <AkSkeleton @width='160px' @height='35px' />
+
+      <AkSkeleton @width='18px' @height='18px' class='ml-3' />
+    </AkStack>
+  </AkStack>
+</div>
+
+<Sbom::EmptyLoadingView
+  @empty={{false}}
+  @loading={{true}}
+  @loadingSvgHeight='200px'
+  @height='350px'
+/>
\ No newline at end of file
diff --git a/app/components/sbom/scan-details/skeleton-loader/index.scss b/app/components/sbom/scan-details/skeleton-loader/index.scss
new file mode 100644
index 000000000..3bf721a02
--- /dev/null
+++ b/app/components/sbom/scan-details/skeleton-loader/index.scss
@@ -0,0 +1,10 @@
+.summary-header-root {
+  border-radius: var(--sbom-scan-details-skeleton-loader-summary-border-radius);
+  border: 1px solid
+    var(--sbom-scan-details-skeleton-loader-summary-border-color);
+  box-sizing: border-box;
+
+  .summary-header-container {
+    padding: 0.75em 1em;
+  }
+}
diff --git a/app/components/sbom/scan-details/skeleton-loader/index.ts b/app/components/sbom/scan-details/skeleton-loader/index.ts
new file mode 100644
index 000000000..1e263a59d
--- /dev/null
+++ b/app/components/sbom/scan-details/skeleton-loader/index.ts
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class SbomScanDetailsSkeletonLoaderComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Sbom::ScanDetails::SkeletonLoader': typeof SbomScanDetailsSkeletonLoaderComponent;
+  }
+}
diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
index 06f06832f..fa5922ef5 100644
--- a/app/styles/_component-variables.scss
+++ b/app/styles/_component-variables.scss
@@ -704,10 +704,20 @@ body {
   --appmonitoring-border-radius: var(--border-radius);
   --appmonitoring-border-color: var(--neutral-white-100);
 
+  //variables for appmonitoring/skeleton-loader
+  --appmonitoring-skeleton-loader-header-border-color: var(--neutral-white-100);
+  --appmonitoring-skeleton-loader-header-border-radius: var(--border-radius);
+
   //variables for appmonitoring/details
   --appmonitoring-details-border-color: var(--neutral-grey-100);
   --appmonitoring-details-toggle-border-color: var(--neutral-grey-200);
 
+  //variables for appmonitoring/details/skeleton-loader
+  --appmonitoring-details-skeleton-loader-border-color: var(--neutral-grey-100);
+  --appmonitoring-details-skeleton-loader-toggle-border-color: var(
+    --neutral-grey-200
+  );
+
   //variables for appmonitoring/settings
   --appmonitoring-settings-block-description-text-color: var(
     --neutral-grey-500
@@ -785,6 +795,14 @@ body {
   --sbom-scan-details-link-border-radius: var(--border-radius);
   --sbom-scan-details-link-border-color: var(--border-color-1);
 
+  // variables for sbom/scan-details/skeleton-loader
+  --sbom-scan-details-skeleton-loader-summary-border-radius: var(
+    --border-radius
+  );
+  --sbom-scan-details-skeleton-loader-summary-border-color: var(
+    --border-color-1
+  );
+
   // variables for sbom/component-details/vulnerabilities
   --sbom-component-details-vulnerabilities-list-header-background-color: var(
     --ak-table-header-background-neutral
@@ -828,6 +846,14 @@ body {
     --common-white
   );
 
+  // variables for sbom/component-details/skeleton-loader
+  --sbom-component-details-skeleton-loader-summary-border-radius: var(
+    --border-radius
+  );
+  --sbom-component-details-skeleton-loader-summary-border-color: var(
+    --border-color-1
+  );
+
   // variables for sbom/summary-header
   --sbom-summary-header-border-radius: var(--border-radius);
   --sbom-summary-header-border-color: var(--border-color-1);
@@ -1290,6 +1316,11 @@ body {
   --file-compare-header-platform-android-color: var(--android);
   --file-compare-header-platform-ios-color: var(--ios);
 
+  // variables for file-compare/skeleton-loader
+  --file-compare-skeleton-loader-background-color: var(--common-white);
+  --file-compare-skeleton-loader-border-color: var(--neutral-grey-300);
+  --file-compare-skeleton-loader-box-shadow: var(--box-shadow-6);
+
   // variables for file-compare/vulnerability-details
   --file-compare-vulnerability-details-white-background: var(--common-white);
   --file-compare-vulnerability-details-border-color: var(--neutral-grey-200);
@@ -1915,6 +1946,17 @@ body {
   // variables for organization/settings
   --organization-settings-container-background-color: var(--background-main);
 
+  // variables for organization/settings/skeleton-loader
+  --organization-settings-skeleton-loader-background-color: var(
+    --background-main
+  );
+  --organization-settings-skeleton-loader-sso-border-color: var(
+    --border-color-1
+  );
+  --organization-settings-skeleton-loader-sso-border-radius: var(
+    --border-radius
+  );
+
   // variables for organization/settings-wrapper
   --organization-settings-wrapper-background-color: var(--background-light);
 
diff --git a/app/templates/authenticated/dashboard/app-monitoring/index-loading.hbs b/app/templates/authenticated/dashboard/app-monitoring/index-loading.hbs
new file mode 100644
index 000000000..f9bb21378
--- /dev/null
+++ b/app/templates/authenticated/dashboard/app-monitoring/index-loading.hbs
@@ -0,0 +1,5 @@
+{{page-title (t 'appMonitoring')}}
+
+<PageWrapper @backgroundColor='inherit'>
+  <AppMonitoring::SkeletonLoader />
+</PageWrapper>
\ No newline at end of file
diff --git a/app/templates/authenticated/dashboard/app-monitoring/index.hbs b/app/templates/authenticated/dashboard/app-monitoring/index.hbs
index f329a4072..ea9ac9c67 100644
--- a/app/templates/authenticated/dashboard/app-monitoring/index.hbs
+++ b/app/templates/authenticated/dashboard/app-monitoring/index.hbs
@@ -1,4 +1,4 @@
-{{page-title 'Store Monitoring'}}
+{{page-title (t 'appMonitoring')}}
 
 <PageWrapper @backgroundColor='inherit'>
   <AppMonitoring @appMonitoring={{@model}} />
diff --git a/app/templates/authenticated/dashboard/app-monitoring/monitoring-details-loading.hbs b/app/templates/authenticated/dashboard/app-monitoring/monitoring-details-loading.hbs
new file mode 100644
index 000000000..bb1e34ea3
--- /dev/null
+++ b/app/templates/authenticated/dashboard/app-monitoring/monitoring-details-loading.hbs
@@ -0,0 +1,5 @@
+{{page-title (t 'appMonitoringModule.monitoringDetails')}}
+
+<PageWrapper @backgroundColor='inherit'>
+  <AppMonitoring::Details::SkeletonLoader />
+</PageWrapper>
\ No newline at end of file
diff --git a/app/templates/authenticated/dashboard/app-monitoring/monitoring-details.hbs b/app/templates/authenticated/dashboard/app-monitoring/monitoring-details.hbs
index 8731df851..2580e9e3e 100644
--- a/app/templates/authenticated/dashboard/app-monitoring/monitoring-details.hbs
+++ b/app/templates/authenticated/dashboard/app-monitoring/monitoring-details.hbs
@@ -1,4 +1,4 @@
-{{page-title 'Monitoring Details'}}
+{{page-title (t 'appMonitoringModule.monitoringDetails')}}
 
 <PageWrapper @backgroundColor='inherit'>
   <AkBreadcrumbs::AutoTrail class='pt-2' />
diff --git a/app/templates/authenticated/dashboard/compare-loading.hbs b/app/templates/authenticated/dashboard/compare-loading.hbs
new file mode 100644
index 000000000..fee220cdf
--- /dev/null
+++ b/app/templates/authenticated/dashboard/compare-loading.hbs
@@ -0,0 +1,5 @@
+{{page-title (t 'fileCompare.title')}}
+
+<PageWrapper>
+  <FileCompare::SkeletonLoader />
+</PageWrapper>
\ No newline at end of file
diff --git a/app/templates/authenticated/dashboard/compare.hbs b/app/templates/authenticated/dashboard/compare.hbs
index 1bb0cd7b4..2138e6b15 100644
--- a/app/templates/authenticated/dashboard/compare.hbs
+++ b/app/templates/authenticated/dashboard/compare.hbs
@@ -1,4 +1,4 @@
-{{page-title 'File Compare'}}
+{{page-title (t 'fileCompare.title')}}
 
 <PageWrapper>
   <FileCompare
diff --git a/app/templates/authenticated/dashboard/compare/index.hbs b/app/templates/authenticated/dashboard/compare/index.hbs
index 31f5960ce..f0d23e121 100644
--- a/app/templates/authenticated/dashboard/compare/index.hbs
+++ b/app/templates/authenticated/dashboard/compare/index.hbs
@@ -1,4 +1,4 @@
-{{page-title 'NewIssues'}}
+{{page-title (t 'fileCompare.recurringIssues')}}
 
 <FileCompare::Table
   @comparisonFilterKey={{@model.comparisonFilterKey}}
diff --git a/app/templates/authenticated/dashboard/compare/new-issues.hbs b/app/templates/authenticated/dashboard/compare/new-issues.hbs
index 62c09bca6..7221b6ef2 100644
--- a/app/templates/authenticated/dashboard/compare/new-issues.hbs
+++ b/app/templates/authenticated/dashboard/compare/new-issues.hbs
@@ -1,4 +1,4 @@
-{{page-title 'RecurringIssues'}}
+{{page-title (t 'fileCompare.newIssues')}}
 
 <FileCompare::Table
   @comparisonFilterKey={{@model.comparisonFilterKey}}
diff --git a/app/templates/authenticated/dashboard/compare/untested-cases-loading.hbs b/app/templates/authenticated/dashboard/compare/untested-cases-loading.hbs
new file mode 100644
index 000000000..ac3448ad0
--- /dev/null
+++ b/app/templates/authenticated/dashboard/compare/untested-cases-loading.hbs
@@ -0,0 +1,3 @@
+{{page-title (t 'untested')}}
+
+<FileCompare::Loader @loadingText='{{t "loading"}}...' />
\ No newline at end of file
diff --git a/app/templates/authenticated/dashboard/compare/untested-cases.hbs b/app/templates/authenticated/dashboard/compare/untested-cases.hbs
index efa03d880..9a0b9152f 100644
--- a/app/templates/authenticated/dashboard/compare/untested-cases.hbs
+++ b/app/templates/authenticated/dashboard/compare/untested-cases.hbs
@@ -1,4 +1,4 @@
-{{page-title 'Untested'}}
+{{page-title (t 'untested')}}
 
 <FileCompare::Table
   @comparisonFilterKey={{@model.comparisonFilterKey}}
diff --git a/app/templates/authenticated/dashboard/organization-settings/index-loading.hbs b/app/templates/authenticated/dashboard/organization-settings/index-loading.hbs
new file mode 100644
index 000000000..e69d4b509
--- /dev/null
+++ b/app/templates/authenticated/dashboard/organization-settings/index-loading.hbs
@@ -0,0 +1,3 @@
+{{page-title (t 'settings')}}
+
+<Organization::Settings::SkeletonLoader />
\ No newline at end of file
diff --git a/app/templates/authenticated/dashboard/sbom/component-details-loading.hbs b/app/templates/authenticated/dashboard/sbom/component-details-loading.hbs
new file mode 100644
index 000000000..8332af195
--- /dev/null
+++ b/app/templates/authenticated/dashboard/sbom/component-details-loading.hbs
@@ -0,0 +1,3 @@
+{{page-title (t 'sbomModule.componentDetails')}}
+
+<Sbom::ComponentDetails::SkeletonLoader />
\ No newline at end of file
diff --git a/app/templates/authenticated/dashboard/sbom/component-details.hbs b/app/templates/authenticated/dashboard/sbom/component-details.hbs
index 3a2cb43dd..9ffd36021 100644
--- a/app/templates/authenticated/dashboard/sbom/component-details.hbs
+++ b/app/templates/authenticated/dashboard/sbom/component-details.hbs
@@ -1,4 +1,4 @@
-{{page-title 'Component Details'}}
+{{page-title (t 'sbomModule.componentDetails')}}
 
 <AkBreadcrumbs::AutoTrail class='pt-2 pb-3' />
 
diff --git a/app/templates/authenticated/dashboard/sbom/scan-details-loading.hbs b/app/templates/authenticated/dashboard/sbom/scan-details-loading.hbs
new file mode 100644
index 000000000..49834b1df
--- /dev/null
+++ b/app/templates/authenticated/dashboard/sbom/scan-details-loading.hbs
@@ -0,0 +1,3 @@
+{{page-title (t 'scanDetails')}}
+
+<Sbom::ScanDetails::SkeletonLoader />
\ No newline at end of file
diff --git a/app/templates/authenticated/dashboard/sbom/scan-details.hbs b/app/templates/authenticated/dashboard/sbom/scan-details.hbs
index 1364f5c80..77d7a99c2 100644
--- a/app/templates/authenticated/dashboard/sbom/scan-details.hbs
+++ b/app/templates/authenticated/dashboard/sbom/scan-details.hbs
@@ -1,4 +1,4 @@
-{{page-title 'Scan Details'}}
+{{page-title (t 'scanDetails')}}
 
 <AkBreadcrumbs::AutoTrail class='pt-2 pb-3' />
 
diff --git a/translations/en.json b/translations/en.json
index 2d965a10f..4645636d1 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -498,6 +498,7 @@
     "untestedIssues": "Untested Issues",
     "summary1": "You are comparing file of ID",
     "summary2": "with file of ID",
+    "title": "File Compare",
     "nameOfTestCase": "Name of Test Case",
     "noTagsMessage": "No Tags Available",
     "selectAFile": "Select a File",
diff --git a/translations/ja.json b/translations/ja.json
index a64974cba..c085bc685 100644
--- a/translations/ja.json
+++ b/translations/ja.json
@@ -498,6 +498,7 @@
     "untestedIssues": "Untested Issues",
     "summary1": "You are comparing file of ID",
     "summary2": "with file of ID",
+    "title": "File Compare",
     "nameOfTestCase": "Name of Test Case",
     "noTagsMessage": "No Tags Available",
     "selectAFile": "Select a File",