From 336cb4a2bc5db840f570b9b844f2247e92c7bb43 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sat, 9 Sep 2023 11:06:36 +0300
Subject: [PATCH] Improve messaging for failed movie details data

---
 frontend/src/Movie/Details/MovieDetails.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index 558791a13..dfa1cdea4 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import TextTruncate from 'react-text-truncate';
+import Alert from 'Components/Alert';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
 import InfoLabel from 'Components/InfoLabel';
@@ -634,24 +635,27 @@ class MovieDetails extends Component {
 
           <div className={styles.contentContainer}>
             {
-              !isFetching && movieFilesError &&
-                <div>
+              !isFetching && movieFilesError ?
+                <Alert kind={kinds.DANGER}>
                   {translate('LoadingMovieFilesFailed')}
-                </div>
+                </Alert> :
+                null
             }
 
             {
-              !isFetching && movieCreditsError &&
-                <div>
+              !isFetching && movieCreditsError ?
+                <Alert kind={kinds.DANGER}>
                   {translate('LoadingMovieCreditsFailed')}
-                </div>
+                </Alert> :
+                null
             }
 
             {
-              !isFetching && extraFilesError &&
-                <div>
+              !isFetching && extraFilesError ?
+                <Alert kind={kinds.DANGER}>
                   {translate('LoadingMovieExtraFilesFailed')}
-                </div>
+                </Alert> :
+                null
             }
 
             <Tabs selectedIndex={selectedTabIndex} onSelect={this.onTabSelect}>