Added loading screen placeholder and removed old icons

package.json

@@ -93,6 +93,7 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",

src/popup/components/AppLoadingSkeleton.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Skeleton } from '@shared/ui/skeleton';
+
+export const AppLoadingSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2 w-full p-2">
+      <Skeleton className="h-10 min-w-32 w-full" />
+      <Skeleton className="h-32 min-w-32 w-full" />
+      <Skeleton className="h-32 min-w-32 w-full" />
+      <Skeleton className="h-48 min-w-32 w-full" />
+      <Skeleton className="h-64 min-w-32 w-full" />
+    </div>
+  );
+};

src/popup/components/_stories/AppLoadingSkeleton.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { AppLoadingSkeleton } from '../AppLoadingSkeleton';
+
+export default {
+  title: 'popup/components/AppLoadingSkeleton',
+  component: AppLoadingSkeleton,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof AppLoadingSkeleton>;
+
+type Story = StoryObj<Meta<typeof AppLoadingSkeleton>>;
+
+export const Default: Story = {
+  render: () => <AppLoadingSkeleton />,
+  parameters: {
+    layout: 'centered',
+  },
+};

src/popup/hooks/PopupContext.tsx

@@ -4,6 +4,7 @@ import { DeepReadonly } from 'utility-types';
 import { Preferences } from '@shared/db/types';
 import { DEFAULT_PREFERENCES } from '@shared/preferences';
 
+import { AppLoadingSkeleton } from '@popup/components/AppLoadingSkeleton';
 import { getFilteredWebsiteTimeStoreSlice } from '@popup/services/time-store';
 
 import { useActiveTabHostname } from './useActiveTab';
@@ -29,7 +30,7 @@ const PopupContext = React.createContext<PopupContextType>(DEFAULT_CONTEXT);
 export const usePopupContext = () => React.useContext(PopupContext);
 
 export const PopupContextProvider = ({ children }: React.PropsWithChildren) => {
-  const store = useTimeStore();
+  const [store, isLoaded] = useTimeStore();
   const host = useActiveTabHostname();
   const [settings, updateSettings] = useSettings();
 
@@ -51,7 +52,7 @@ export const PopupContextProvider = ({ children }: React.PropsWithChildren) => {
         updateSettings,
       }}
     >
-      {children}
+      {isLoaded ? children : <AppLoadingSkeleton />}
     </PopupContext.Provider>
   );
 };

src/popup/hooks/useTimeStore.ts

@@ -10,8 +10,10 @@ export { TimeStore };
 
 export const useTimeStore = () => {
   const [store, setStore] = React.useState<TimeStore>({});
+  const [isLoaded, setIsLoaded] = React.useState(false);
 
   React.useEffect(() => {
+    const startDate = new Date();
     Promise.all([getTotalActivity(), getActiveTabRecord()]).then(
       ([activity, activeRecord]) => {
         if (activeRecord?.hostname) {
@@ -24,9 +26,17 @@ export const useTimeStore = () => {
         }
 
         setStore(activity);
+
+        const endDate = new Date();
+        // Should be at least 150ms to avoid flickering
+        const delay = Math.max(
+          150 - (endDate.getTime() - startDate.getTime()),
+          0,
+        );
+        setTimeout(() => setIsLoaded(true), delay);
       },
     );
   }, []);
 
-  return store;
+  return [store, isLoaded] as const;
 };

src/popup/pages/preferences/components/ThemeSelector.tsx

@@ -1,10 +1,9 @@
+import { Eclipse, Moon, Sun } from 'lucide-react';
 import * as React from 'react';
-import { twMerge } from 'tailwind-merge';
 
-import { Button } from '@shared/blocks/Button';
-import { Icon, IconType } from '@shared/blocks/Icon';
 import { i18n } from '@shared/services/i18n';
 import { ColorScheme, ThemeService } from '@shared/services/theme';
+import { Button } from '@shared/ui/button';
 
 export const ThemeSelector = () => {
   const [theme, setTheme] = React.useState(() => ThemeService.getAppTheme());
@@ -35,30 +34,27 @@ export const ThemeSelector = () => {
       <div className="flex flex-row rounded-lg border-2 border-solid border-neutral-300 dark:border-neutral-900 overflow-hidden">
         <Button
           onClick={handleAutoThemeSelect}
-          className={twMerge(
-            'flex-1 rounded-none',
-            theme === 'auto' && 'bg-neutral-300 dark:bg-neutral-900',
-          )}
+          className="flex-1"
+          variant={theme === 'auto' ? 'default' : 'secondary'}
         >
-          <Icon type={IconType.Eclipse} /> {i18n('ThemeSelector_OptionAuto')}
+          <Eclipse size={16} className="mr-1" />
+          {i18n('ThemeSelector_OptionAuto')}
         </Button>
         <Button
           onClick={handleDarkThemeSelect}
-          className={twMerge(
-            'flex-1 rounded-none border-l-2 border-r-2 border-solid border-neutral-300 dark:border-neutral-900',
-            theme === 'dark' && 'bg-neutral-300 dark:bg-neutral-900',
-          )}
+          className="flex-1"
+          variant={theme === 'dark' ? 'default' : 'secondary'}
         >
-          <Icon type={IconType.Moon} /> {i18n('ThemeSelector_OptionDark')}
+          <Moon size={16} className="mr-1" />
+          {i18n('ThemeSelector_OptionDark')}
         </Button>
         <Button
           onClick={handleLightThemeSelect}
-          className={twMerge(
-            'flex-1 rounded-none',
-            theme === 'light' && 'bg-neutral-300 dark:bg-neutral-900',
-          )}
+          className="flex-1"
+          variant={theme === 'light' ? 'default' : 'secondary'}
         >
-          <Icon type={IconType.Sun} /> {i18n('ThemeSelector_OptionLight')}
+          <Sun size={16} className="mr-1" />
+          {i18n('ThemeSelector_OptionLight')}
         </Button>
       </div>
     </div>

src/shared/services/i18n.ts

@@ -13,19 +13,28 @@ export const i18n = <T extends keyof I18n>(
 ) => {
   const values = placeholders[0];
   if (chrome?.i18n?.getMessage) {
-    return chrome.i18n.getMessage(
-      message,
-      values ? Object.values(values) : undefined,
+    return (
+      chrome.i18n.getMessage(
+        message,
+        values ? Object.values(values) : undefined,
+      ) ?? getMessageFromFallback(message, values)
     );
   }
 
+  return getMessageFromFallback(message, values);
+};
+
+function getMessageFromFallback<T extends keyof I18n>(
+  message: T,
+  values?: Record<string, string>,
+) {
   const messageTemplate = fallback[message].message;
   if (!values) {
     return messageTemplate;
   }
 
   return formatI18NMessage(messageTemplate, values);
-};
+}
 
 export function formatI18NMessage(
   message: string,

src/shared/ui/progress.tsx

@@ -0,0 +1,26 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+
+import { cn } from '@shared/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

src/shared/ui/skeleton.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { cn } from '@shared/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-primary/10', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };