Add fade out effect to the loading screen

src/yuzu/loading_screen.cpp

@@ -5,6 +5,7 @@
 #include <unordered_map>
 #include <QBuffer>
 #include <QByteArray>
+#include <QGraphicsOpacityEffect>
 #include <QHBoxLayout>
 #include <QIODevice>
 #include <QImage>
@@ -13,6 +14,7 @@
 #include <QPalette>
 #include <QPixmap>
 #include <QProgressBar>
+#include <QPropertyAnimation>
 #include <QStyleOption>
 #include <QTime>
 #include <QtConcurrent/QtConcurrentRun>
@@ -71,6 +73,25 @@ LoadingScreen::LoadingScreen(QWidget* parent)
     ui->setupUi(this);
     setMinimumSize(1280, 720);
 
+    // Create a fade out effect to hide this loading screen widget.
+    // When fading opacity, it will fade to the parent widgets background color, which is why we
+    // create an internal widget named fade_widget that we use the effect on, while keeping the
+    // loading screen widget's background color black. This way we can create a fade to black effect
+    opacity_effect = new QGraphicsOpacityEffect(this);
+    opacity_effect->setOpacity(1);
+    ui->fade_parent->setGraphicsEffect(opacity_effect);
+    fadeout_animation = std::make_unique<QPropertyAnimation>(opacity_effect, "opacity");
+    fadeout_animation->setDuration(500);
+    fadeout_animation->setStartValue(1);
+    fadeout_animation->setEndValue(0);
+    fadeout_animation->setEasingCurve(QEasingCurve::OutBack);
+
+    // After the fade completes, hide the widget and reset the opacity
+    connect(fadeout_animation.get(), &QPropertyAnimation::finished, [this] {
+        hide();
+        opacity_effect->setOpacity(1);
+        emit Hidden();
+    });
     connect(this, &LoadingScreen::LoadProgress, this, &LoadingScreen::OnLoadProgress,
             Qt::QueuedConnection);
     qRegisterMetaType<VideoCore::LoadCallbackStage>();
@@ -115,9 +136,14 @@ void LoadingScreen::Prepare(Loader::AppLoader& loader) {
         ui->logo->setPixmap(map);
     }
 
+    slow_shader_compile_start = false;
     OnLoadProgress(VideoCore::LoadCallbackStage::Prepare, 0, 0);
 }
 
+void LoadingScreen::OnLoadComplete() {
+    fadeout_animation->start(QPropertyAnimation::KeepWhenStopped);
+}
+
 void LoadingScreen::OnLoadProgress(VideoCore::LoadCallbackStage stage, std::size_t value,
                                    std::size_t total) {
     using namespace std::chrono;
@@ -125,6 +151,7 @@ void LoadingScreen::OnLoadProgress(VideoCore::LoadCallbackStage stage, std::size
     // reset the timer if the stage changes
     if (stage != previous_stage) {
         ui->progress_bar->setStyleSheet(progressbar_style[stage]);
+        // Hide the progress bar during the prepare stage
         if (stage == VideoCore::LoadCallbackStage::Prepare) {
             ui->progress_bar->hide();
         } else {

src/yuzu/loading_screen.h

@@ -27,7 +27,9 @@ enum class LoadCallbackStage;
 
 class QBuffer;
 class QByteArray;
+class QGraphicsOpacityEffect;
 class QMovie;
+class QPropertyAnimation;
 
 class LoadingScreen : public QWidget {
     Q_OBJECT
@@ -45,14 +47,21 @@ public:
     /// used resources such as the logo and banner.
     void Clear();
 
+    /// Slot used to update the status of the progress bar
     void OnLoadProgress(VideoCore::LoadCallbackStage stage, std::size_t value, std::size_t total);
 
+    /// Hides the LoadingScreen with a fade out effect
+    void OnLoadComplete();
+
     // In order to use a custom widget with a stylesheet, you need to override the paintEvent
     // See https://wiki.qt.io/How_to_Change_the_Background_Color_of_QWidget
     void paintEvent(QPaintEvent* event) override;
 
 signals:
     void LoadProgress(VideoCore::LoadCallbackStage stage, std::size_t value, std::size_t total);
+    /// Signals that this widget is completely hidden now and should be replaced with the other
+    /// widget
+    void Hidden();
 
 private:
 #ifndef YUZU_QT_MOVIE_MISSING
@@ -64,6 +73,9 @@ private:
     std::size_t previous_total = 0;
     VideoCore::LoadCallbackStage previous_stage;
 
+    QGraphicsOpacityEffect* opacity_effect = nullptr;
+    std::unique_ptr<QPropertyAnimation> fadeout_animation = nullptr;
+
     // Definitions for the differences in text and styling for each stage
     std::unordered_map<VideoCore::LoadCallbackStage, const char*> progressbar_style;
     std::unordered_map<VideoCore::LoadCallbackStage, QString> stage_translations;

src/yuzu/loading_screen.ui

@@ -30,6 +30,24 @@
     <number>0</number>
    </property>
    <item>
+    <widget class="QWidget" name="fade_parent" native="true">
+     <layout class="QVBoxLayout" name="verticalLayout_2">
+      <property name="spacing">
+       <number>0</number>
+      </property>
+      <property name="leftMargin">
+       <number>0</number>
+      </property>
+      <property name="topMargin">
+       <number>0</number>
+      </property>
+      <property name="rightMargin">
+       <number>0</number>
+      </property>
+      <property name="bottomMargin">
+       <number>0</number>
+      </property>
+      <item alignment="Qt::AlignLeft|Qt::AlignTop">
        <widget class="QLabel" name="logo">
         <property name="text">
          <string/>
@@ -135,6 +153,9 @@ font: 75 15pt &quot;Arial&quot;;</string>
       </item>
      </layout>
     </widget>
+   </item>
+  </layout>
+ </widget>
  <resources/>
  <connections/>
 </ui>

src/yuzu/main.cpp

@@ -415,6 +415,13 @@ void GMainWindow::InitializeWidgets() {
     loading_screen = new LoadingScreen(this);
     loading_screen->hide();
     ui.horizontalLayout->addWidget(loading_screen);
+    connect(loading_screen, &LoadingScreen::Hidden, [&] {
+        loading_screen->Clear();
+        if (emulation_running) {
+            render_window->show();
+            render_window->setFocus();
+        }
+    });
 
     // Create status bar
     message_label = new QLabel();
@@ -1513,10 +1520,7 @@ void GMainWindow::OnStopGame() {
 }
 
 void GMainWindow::OnLoadComplete() {
-    loading_screen->hide();
-    loading_screen->Clear();
-    render_window->show();
-    render_window->setFocus();
+    loading_screen->OnLoadComplete();
 }
 
 void GMainWindow::OnMenuReportCompatibility() {