diff --git a/app/assets/javascripts/releases/components/app.vue b/app/assets/javascripts/releases/components/app.vue
index 0ad5ee2915c..5a06c4fec58 100644
--- a/app/assets/javascripts/releases/components/app.vue
+++ b/app/assets/javascripts/releases/components/app.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
+import { GlSkeletonLoading, GlEmptyState } from '@gitlab/ui';
 import ReleaseBlock from './release_block.vue';
 
 export default {
   name: 'ReleasesApp',
   components: {
-    GlLoadingIcon,
+    GlSkeletonLoading,
     GlEmptyState,
     ReleaseBlock,
   },
@@ -43,7 +43,7 @@ export default {
 </script>
 <template>
   <div class="prepend-top-default">
-    <gl-loading-icon v-if="isLoading" :size="2" class="js-loading prepend-top-20" />
+    <gl-skeleton-loading v-if="isLoading" class="js-loading" />
 
     <gl-empty-state
       v-else-if="shouldRenderEmptyState"
diff --git a/changelogs/unreleased/55242-skeleton-loading-releases.yml b/changelogs/unreleased/55242-skeleton-loading-releases.yml
new file mode 100644
index 00000000000..43cda64ce04
--- /dev/null
+++ b/changelogs/unreleased/55242-skeleton-loading-releases.yml
@@ -0,0 +1,5 @@
+---
+title: Adds skeleton loading to releases page
+merge_request:
+author:
+type: changed