diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js
index 22453fcd4ee9..aaeb85f953d9 100644
--- a/src/libs/actions/PersonalDetails.js
+++ b/src/libs/actions/PersonalDetails.js
@@ -8,7 +8,6 @@ import CONST from '../../CONST';
 import NetworkConnection from '../NetworkConnection';
 import * as API from '../API';
 import NameValuePair from './NameValuePair';
-import * as ReportUtils from '../reportUtils';
 import * as OptionsListUtils from '../OptionsListUtils';
 import Growl from '../Growl';
 import * as Localize from '../Localize';
@@ -146,6 +145,7 @@ function fetchPersonalDetails() {
  * Get personal details from report participants.
  *
  * @param {Object} reports
+ * @returns {Promise}
  */
 function getFromReportParticipants(reports) {
     const participantEmails = _.chain(reports)
@@ -155,10 +155,10 @@ function getFromReportParticipants(reports) {
         .value();
 
     if (participantEmails.length === 0) {
-        return;
+        return Promise.resolve({});
     }
 
-    API.PersonalDetails_GetForEmails({emailList: participantEmails.join(',')})
+    return API.PersonalDetails_GetForEmails({emailList: participantEmails.join(',')})
         .then((data) => {
             const existingDetails = _.pick(data, participantEmails);
 
@@ -173,36 +173,7 @@ function getFromReportParticipants(reports) {
 
             const formattedPersonalDetails = formatPersonalDetails(details);
             Onyx.merge(ONYXKEYS.PERSONAL_DETAILS, formattedPersonalDetails);
-
-            // The personalDetails of the participants contain their avatar images. Here we'll go over each
-            // report and based on the participants we'll link up their avatars to report icons. This will
-            // skip over default rooms which aren't named by participants.
-            const reportsToUpdate = {};
-            _.each(reports, (report) => {
-                if (report.participants.length <= 0 && !ReportUtils.isChatRoom(report)) {
-                    return;
-                }
-
-                const avatars = OptionsListUtils.getReportIcons(report, details);
-                const reportName = ReportUtils.isChatRoom(report)
-                    ? report.reportName
-                    : _.chain(report.participants)
-                        .filter(participant => participant !== currentUserEmail)
-                        .map(participant => lodashGet(
-                            formattedPersonalDetails,
-                            [participant, 'displayName'],
-                            participant,
-                        ))
-                        .value()
-                        .join(', ');
-
-                reportsToUpdate[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`] = {icons: avatars, reportName};
-            });
-
-            // We use mergeCollection such that it updates ONYXKEYS.COLLECTION.REPORT in one go.
-            // Any withOnyx subscribers to this key will also receive the complete updated props just once
-            // than updating props for each report and re-rendering had merge been used.
-            Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, reportsToUpdate);
+            return details;
         });
 }
 
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index aff30887392d..8a31e02464bb 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -320,6 +320,45 @@ function fetchIOUReportID(debtorEmail) {
     });
 }
 
+function configureReportNameAndIcons(reports, details) {
+    // The personalDetails of the participants contain their avatar images. Here we'll go over each
+    // report and based on the participants we'll link up their avatars to report icons. This will
+    // skip over default rooms which aren't named by participants.
+
+    const reportsToUpdate = {};
+    _.each(reports, (report) => {
+        if (report.participants.length <= 0 && !ReportUtils.isChatRoom(report)) {
+            return;
+        }
+        const isChatRoom = ReportUtils.isChatRoom(report);
+
+        // Chat rooms have a specific avatar so we can return any non-empty array but for 1:1 chats and group chats
+        // avatars are extracted from avatars of the participants.
+        const avatars = isChatRoom ? [''] : OptionsListUtils.getReportIcons(report, details);
+
+        // ReportName is already present in report for chatrooms but for 1:1 chats and group chats
+        // reportName is extracted from displayNames of the participants.
+        const reportName = isChatRoom
+            ? report.reportName
+            : _.chain(report.participants)
+                .filter(participant => participant !== currentUserEmail)
+                .map(participant => lodashGet(
+                    PersonalDetails.formatPersonalDetails(details),
+                    [participant, 'displayName'],
+                    participant,
+                ))
+                .value()
+                .join(', ');
+
+        reportsToUpdate[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`] = {icons: avatars, reportName};
+    });
+
+    // We use mergeCollection such that it updates ONYXKEYS.COLLECTION.REPORT in one go.
+    // Any withOnyx subscribers to this key will also receive the complete updated props just once
+    // than updating props for each report and re-rendering had merge been used.
+    Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, reportsToUpdate);
+}
+
 /**
  * Fetches chat reports when provided a list of chat report IDs.
  * If the shouldRedirectIfInaccessible flag is set, we redirect to the Concierge chat
@@ -400,8 +439,11 @@ function fetchChatReportsByIDs(chatList, shouldRedirectIfInaccessible = false) {
             Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT_IOUS, reportIOUData);
             Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, simplifiedReports);
 
+            const simplifiedReportsList = _.values(simplifiedReports);
+
             // Fetch the personal details if there are any
-            PersonalDetails.getFromReportParticipants(_.values(simplifiedReports));
+            PersonalDetails.getFromReportParticipants(simplifiedReportsList)
+                .then(details => configureReportNameAndIcons(simplifiedReportsList, details));
             return fetchedReports;
         })
         .catch((err) => {