Adjust copy in loading screen

_locales/en/messages.json

@@ -399,9 +399,17 @@
     "message": "Loading messages. $count$ so far...",
     "description": "(deleted 03/25/2023) Message shown on the loading screen when we're catching up on the backlog of messages"
   },
-  "icu:loadingMessages": {
+  "icu:loadingMessages--other": {
-    "messageformat": "Loading messages from {daysAgo, plural, one {1 day} other {# days}} ago...",
+    "messageformat": "Loading messages from {daysAgo} days ago...",
-    "description": "Message shown on the loading screen when we're catching up on the backlog of messages"
+    "description": "Message shown on the loading screen when we're catching up on the backlog of messages from day before yesterday and earlier"
+  },
+  "icu:loadingMessages--yesterday": {
+    "messageformat": "Loading messages from yesterday...",
+    "description": "Message shown on the loading screen when we're catching up on the backlog of messages from yesterday"
+  },
+  "icu:loadingMessages--today": {
+    "messageformat": "Loading messages from today...",
+    "description": "Message shown on the loading screen when we're catching up on the backlog of messages from today"
   },
   "view": {
     "message": "View",

ts/components/Inbox.stories.tsx

@@ -55,16 +55,18 @@ const Template: Story<PropsType & { daysAgo?: number }> = ({
   ...args
 }) => {
   const now = useMemo(() => Date.now(), []);
-  const [offset, setOffset] = useState(0);
+  const [dayOffset, setDayOffset] = useState(0);
 
   useEffect(() => {
     if (daysAgo === undefined) {
-      setOffset(0);
+      setDayOffset(0);
       return noop;
     }
 
     const interval = setInterval(() => {
-      setOffset(prevValue => (prevValue + 1 / 4) % daysAgo);
+      // Increment day offset by 1 / 24 of a day (an hour), and wrap it when it
+      // reaches `daysAgo` value.
+      setDayOffset(prevValue => (prevValue + 1 / 24) % daysAgo);
     }, SECOND / 10);
 
     return () => clearInterval(interval);
@@ -75,7 +77,7 @@ const Template: Story<PropsType & { daysAgo?: number }> = ({
   const envelopeTimestamp =
     firstEnvelopeTimestamp === undefined
       ? undefined
-      : firstEnvelopeTimestamp + offset * DAY;
+      : firstEnvelopeTimestamp + dayOffset * DAY;
 
   return (
     <Inbox

ts/components/Inbox.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactNode } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 
 import type { ShowConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
@@ -63,6 +63,16 @@ export function Inbox({
     selectedConversationId
   );
 
+  const now = useMemo(() => Date.now(), []);
+  const midnight = useMemo(() => {
+    const date = new Date(now);
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+    return date.getTime();
+  }, [now]);
+
   useEffect(() => {
     if (prevConversationId !== selectedConversationId) {
       if (prevConversationId) {
@@ -176,7 +186,6 @@ export function Inbox({
   }, [hasInitialLoadCompleted]);
 
   if (!internalHasInitialLoadCompleted) {
-    const now = Date.now();
     let loadingProgress = 0;
     if (
       firstEnvelopeTimestamp !== undefined &&
@@ -193,6 +202,23 @@ export function Inbox({
         ) * 100;
     }
 
+    let message = i18n('loading');
+    if (envelopeTimestamp !== undefined) {
+      const daysBeforeMidnight = Math.ceil(
+        (midnight - envelopeTimestamp) / DAY
+      );
+
+      if (daysBeforeMidnight <= 0) {
+        message = i18n('icu:loadingMessages--today');
+      } else if (daysBeforeMidnight === 1) {
+        message = i18n('icu:loadingMessages--yesterday');
+      } else {
+        message = i18n('icu:loadingMessages--other', {
+          daysAgo: daysBeforeMidnight,
+        });
+      }
+    }
+
     return (
       <div className="app-loading-screen">
         <div className="module-title-bar-drag-area" />
@@ -204,16 +230,7 @@ export function Inbox({
             style={{ transform: `translateX(${loadingProgress - 100}%)` }}
           />
         </div>
-        <div className="message">
+        <div className="message">{message}</div>
-          {envelopeTimestamp
-            ? i18n('icu:loadingMessages', {
-                daysAgo: Math.max(
-                  1,
-                  Math.round((now - envelopeTimestamp) / DAY)
-                ),
-              })
-            : i18n('loading')}
-        </div>
         <div id="toast" />
       </div>
     );