Alternative inbox visuals

ts/components/Inbox.stories.tsx

@@ -19,10 +19,12 @@ export default {
   args: {
     i18n,
     hasInitialLoadCompleted: false,
+    isAlpha: false,
     isCustomizingPreferredReactions: false,
   },
   argTypes: {
     daysAgo: { control: { type: 'number' } },
+    isAlpha: { control: { type: 'boolean' } },
   },
 } satisfies Meta<PropsType & { daysAgo?: number }>;
 

ts/components/Inbox.tsx

@@ -3,6 +3,7 @@
 
 import type { ReactNode } from 'react';
 import React, { useEffect, useState, useMemo } from 'react';
+import classNames from 'classnames';
 import type { LocalizerType } from '../types/Util';
 import * as log from '../logging/log';
 import { SECOND, DAY } from '../util/durations';
@@ -13,6 +14,7 @@ export type PropsType = {
   envelopeTimestamp: number | undefined;
   hasInitialLoadCompleted: boolean;
   i18n: LocalizerType;
+  isAlpha: boolean;
   isCustomizingPreferredReactions: boolean;
   navTabsCollapsed: boolean;
   onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => unknown;
@@ -23,11 +25,14 @@ export type PropsType = {
   renderStoriesTab: () => JSX.Element;
 };
 
+const PART_COUNT = 16;
+
 export function Inbox({
   firstEnvelopeTimestamp,
   envelopeTimestamp,
   hasInitialLoadCompleted,
   i18n,
+  isAlpha,
   isCustomizingPreferredReactions,
   navTabsCollapsed,
   onToggleNavTabsCollapse,
@@ -89,7 +94,7 @@ export function Inbox({
   }, [hasInitialLoadCompleted]);
 
   if (!internalHasInitialLoadCompleted) {
-    let loadingProgress = 0;
+    let loadingProgress = 100;
     if (
       firstEnvelopeTimestamp !== undefined &&
       envelopeTimestamp !== undefined
@@ -122,11 +127,38 @@ export function Inbox({
       }
     }
 
+    let logo: JSX.Element;
+    if (isAlpha) {
+      const parts = new Array<JSX.Element>();
+      parts.push(
+        <i key="base" className="Inbox__logo__part Inbox__logo__part--base" />
+      );
+      for (let i = 0; i < PART_COUNT; i += 1) {
+        const isVisible = i <= (loadingProgress * PART_COUNT) / 100;
+        parts.push(
+          <i
+            key={i}
+            className={classNames({
+              Inbox__logo__part: true,
+              'Inbox__logo__part--animated':
+                firstEnvelopeTimestamp !== undefined && loadingProgress !== 0,
+              'Inbox__logo__part--segment': true,
+              'Inbox__logo__part--visible': isVisible,
+            })}
+          />
+        );
+      }
+      logo = <div className="Inbox__logo">{parts}</div>;
+    } else {
+      logo = <div className="module-splash-screen__logo module-img--150" />;
+    }
+
     return (
       <div className="app-loading-screen">
         <div className="module-title-bar-drag-area" />
 
-        <div className="module-splash-screen__logo module-img--150" />
+        {logo}
+
         {envelopeTimestamp === undefined ? (
           <div className="dot-container">
             <span className="dot" />

ts/state/smart/Inbox.tsx

@@ -4,6 +4,7 @@
 import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
 import { Inbox } from '../../components/Inbox';
+import { isAlpha } from '../../util/version';
 import { getIntl } from '../selectors/user';
 import { SmartCustomizingPreferredReactionsModal } from './CustomizingPreferredReactionsModal';
 import { getIsCustomizingPreferredReactions } from '../selectors/preferredReactions';
@@ -58,6 +59,7 @@ export const SmartInbox = memo(function SmartInbox(): JSX.Element {
       firstEnvelopeTimestamp={firstEnvelopeTimestamp}
       hasInitialLoadCompleted={hasInitialLoadCompleted}
       i18n={i18n}
+      isAlpha={isAlpha(window.getVersion())}
       isCustomizingPreferredReactions={isCustomizingPreferredReactions}
       navTabsCollapsed={navTabsCollapsed}
       onToggleNavTabsCollapse={toggleNavTabsCollapse}