Fixed placeholder jittering

PsychoSanchez · Dec 25, 2024 · 503682e · 503682e
1 parent 4afdc51
commit 503682e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/src/popup/App.tsx b/src/popup/App.tsx
@@ -12,6 +12,7 @@ import { PreferencesPage } from '@popup/pages/preferences/PreferencesPage';
 
 import '../tailwind.css';
 import './App.css';
+import { AppLoadingSkeletonWrapper } from './components/AppLoadingSkeleton';
 
 enum Pages {
   Overall = 'overall',
@@ -39,30 +40,32 @@ export const PopupApp = () => {
 
   return (
     <PopupContextProvider>
-      <Tabs defaultValue={Pages.Overall} className="p-2">
-        <TabsList className="flex">
-          <TabsTrigger className="flex-1" value={Pages.Overall}>
-            {i18n('PopupApp_OverallTabTitle')}
-          </TabsTrigger>
-          <TabsTrigger className="flex-1" value={Pages.Detailed}>
-            {i18n('PopupApp_DetailedTabTitle')}
-          </TabsTrigger>
-          <TabsTrigger value={Pages.Preferences} className="max-w-[50px]">
-            <Settings />
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value={Pages.Overall}>
-          <OverallPage
-            onNavigateToActivityPage={handleNavigateToActivityDatePage}
-          />
-        </TabsContent>
-        <TabsContent value={Pages.Detailed}>
-          <ActivityPage date={activePage.params?.date} />
-        </TabsContent>
-        <TabsContent value={Pages.Preferences}>
-          <PreferencesPage />
-        </TabsContent>
-      </Tabs>
+      <AppLoadingSkeletonWrapper>
+        <Tabs defaultValue={Pages.Overall} className="p-2">
+          <TabsList className="flex">
+            <TabsTrigger className="flex-1" value={Pages.Overall}>
+              {i18n('PopupApp_OverallTabTitle')}
+            </TabsTrigger>
+            <TabsTrigger className="flex-1" value={Pages.Detailed}>
+              {i18n('PopupApp_DetailedTabTitle')}
+            </TabsTrigger>
+            <TabsTrigger value={Pages.Preferences} className="max-w-[50px]">
+              <Settings />
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value={Pages.Overall}>
+            <OverallPage
+              onNavigateToActivityPage={handleNavigateToActivityDatePage}
+            />
+          </TabsContent>
+          <TabsContent value={Pages.Detailed}>
+            <ActivityPage date={activePage.params?.date} />
+          </TabsContent>
+          <TabsContent value={Pages.Preferences}>
+            <PreferencesPage />
+          </TabsContent>
+        </Tabs>
+      </AppLoadingSkeletonWrapper>
     </PopupContextProvider>
   );
 };
diff --git a/src/popup/components/AppLoadingSkeleton.tsx b/src/popup/components/AppLoadingSkeleton.tsx
@@ -3,6 +3,8 @@ import React, { useCallback } from 'react';
 import { Skeleton } from '@shared/ui/skeleton';
 import { cn } from '@shared/utils';
 
+import { usePopupContext } from '@popup/hooks/PopupContext';
+
 export const AppLoadingSkeleton = ({
   className,
   isVisible,
@@ -24,17 +26,30 @@ export const AppLoadingSkeleton = ({
   return (
     <div
       className={cn(
-        'flex flex-col gap-2 w-full p-2 bg-background absolute top-0 transition-opacity duration-500 pointer-events-none overflow-hidden max-h-full',
+        'flex flex-col gap-2 w-full p-2 bg-background absolute top-0 transition-opacity duration-300 pointer-events-none overflow-hidden max-h-full',
         className,
         isVisible ? 'opacity-100' : 'opacity-0',
       )}
       onTransitionEnd={handleTransitionEnd}
     >
-      <Skeleton className="h-10 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
-      <Skeleton className="h-32 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
-      <Skeleton className="h-32 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
-      <Skeleton className="h-48 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
-      <Skeleton className="h-64 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="min-h-10 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="min-h-32 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="min-h-32 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="min-h-48 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+      <Skeleton className="min-h-64 min-w-32 w-full bg-gray-500/20 dark:bg-gray-500/10" />
+    </div>
+  );
+};
+
+export const AppLoadingSkeletonWrapper = ({
+  children,
+}: React.PropsWithChildren) => {
+  const { isStoreLoaded } = usePopupContext();
+
+  return (
+    <div className="relative">
+      {children}
+      <AppLoadingSkeleton isVisible={!isStoreLoaded} />
     </div>
   );
 };
diff --git a/src/popup/hooks/PopupContext.tsx b/src/popup/hooks/PopupContext.tsx
@@ -4,21 +4,22 @@ 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';
 import { useSettings } from './useSettings';
 import { TimeStore, useTimeStore } from './useTimeStore';
 
 export type PopupContextType = {
+  isStoreLoaded: boolean;
   store: TimeStore;
   activeHostname: string;
   settings: DeepReadonly<Preferences>;
   updateSettings: (updated: Partial<Preferences>) => void;
 };
 
 const DEFAULT_CONTEXT: PopupContextType = {
+  isStoreLoaded: false,
   store: {},
   activeHostname: '',
   settings: DEFAULT_PREFERENCES,
@@ -46,16 +47,14 @@ export const PopupContextProvider = ({ children }: React.PropsWithChildren) => {
   return (
     <PopupContext.Provider
       value={{
+        isStoreLoaded: isLoaded,
         store: filteredStore,
         activeHostname: host || '',
         settings,
         updateSettings,
       }}
     >
-      <div className="relative">
-        {children}
-        <AppLoadingSkeleton isVisible={!isLoaded} />
-      </div>
+      {children}
     </PopupContext.Provider>
   );
 };