Change WebIDE loader page

app/assets/stylesheets/page_bundles/web_ide_loader.scss

+.web-ide-loader {
+  max-width: 400px;
+}
+
+.web-ide-loader .tanuki-logo {
+  width: 50px;
+  height: 50px;
+}
+
+.web-ide-loader .tanuki,
+.web-ide-loader .right-cheek,
+.web-ide-loader .chin,
+.web-ide-loader .left-cheek {
+  animation: animate-tanuki 1.5s infinite;
+}
+
+.web-ide-loader .right-cheek {
+  animation-delay: 0.35s;
+}
+
+.web-ide-loader .chin {
+  animation-delay: 0.7s;
+}
+
+.web-ide-loader .left-cheek {
+  animation-delay: 1.05s;
+}
+
+@keyframes animate-tanuki {
+  0%,
+  50% {
+    filter: brightness(1) grayscale(0);
+  }
+
+  25% {
+    filter: brightness(1.2) grayscale(0.2);
+  }
+}

app/views/ide/_show.html.haml

 - page_title _("IDE"), @project.full_name
+- add_page_specific_style 'page_bundles/web_ide_loader'
 
 - unless use_new_web_ide?
   - add_page_specific_style 'page_bundles/build'
@@ -9,4 +10,4 @@
 
 - data = ide_data(project: @project, fork_info: @fork_info, params: params)
 
-= render partial: 'shared/ide_root', locals: { data: data, loading_text: _('Loading the GitLab IDE...') }
+= render partial: 'shared/ide_root', locals: { data: data, loading_text: _('Loading the GitLab IDE') }

app/views/shared/_ide_root.html.haml

@@ -3,9 +3,8 @@
 
 -# Fix for iOS 13+, the height of the page is actually less than
 -# 100vh because of the presence of the bottom bar
-- @body_class = 'gl-max-h-full gl-fixed'
 
-#ide.gl--flex-center.gl-h-full{ data: data }
-  .gl-text-center
-    = gl_loading_icon(size: 'md')
-    %h2.clgray= loading_text
+#ide.gl-h-full{ data: data }
+  .web-ide-loader.gl-display-flex.gl-justify-content-center.gl-align-items-center.gl-flex-direction-column.gl-h-full.gl-mr-auto.gl-ml-auto
+    = brand_header_logo
+    %h3.clblack.gl-mt-6= loading_text

config/application.rb

@@ -336,6 +336,7 @@ class Application < Rails::Application
     config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/tree.css"
     config.assets.precompile << "page_bundles/users.css"
+    config.assets.precompile << "page_bundles/web_ide_loader.css"
     config.assets.precompile << "page_bundles/wiki.css"
     config.assets.precompile << "page_bundles/work_items.css"
     config.assets.precompile << "page_bundles/xterm.css"

locale/gitlab.pot

@@ -27188,7 +27188,7 @@ msgstr ""
 msgid "Loading snippet"
 msgstr ""
-msgid "Loading the GitLab IDE..."
+msgid "Loading the GitLab IDE"
 msgstr ""
 msgid "Loading, please wait."