Added transition to the skeletons

src/popup/components/AppLoadingSkeleton.tsx

@@ -1,10 +1,35 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { Skeleton } from '@shared/ui/skeleton';
+import { cn } from '@shared/utils';
 
-export const AppLoadingSkeleton = () => {
+export const AppLoadingSkeleton = ({
+  className,
+  isVisible,
+}: {
+  className?: string;
+  isVisible: boolean;
+}) => {
+  const handleTransitionEnd = useCallback(
+    (e: React.TransitionEvent<HTMLDivElement>): void => {
+      if (e.propertyName === 'opacity') {
+        const displayStyle = e.currentTarget.classList.contains('opacity-0')
+          ? 'none'
+          : '';
+        e.currentTarget.style.display = displayStyle;
+      }
+    },
+    [],
+  );
   return (
-    <div className="flex flex-col gap-2 w-full p-2">
+    <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',
+        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" />

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

@@ -15,8 +15,9 @@ type Story = StoryObj<Meta<typeof AppLoadingSkeleton>>;
 
 export const Default: Story = {
   render: () => (
-    <div className="min-w-[600px]">
-      <AppLoadingSkeleton />
+    <div className="min-w-[600px] relative">
+      <div className="min-w-[600px] min-h-[1000px] bg-red-600"></div>
+      <AppLoadingSkeleton className="absolute top-0 bg-background" isVisible />
     </div>
   ),
   parameters: {

src/popup/hooks/PopupContext.tsx

@@ -52,7 +52,10 @@ export const PopupContextProvider = ({ children }: React.PropsWithChildren) => {
         updateSettings,
       }}
     >
-      {isLoaded ? children : <AppLoadingSkeleton />}
+      <div className="relative">
+        {children}
+        <AppLoadingSkeleton isVisible={!isLoaded} />
+      </div>
     </PopupContext.Provider>
   );
 };

src/popup/hooks/useTimeStore.ts

@@ -13,7 +13,6 @@ export const useTimeStore = () => {
   const [isLoaded, setIsLoaded] = React.useState(false);
 
   React.useEffect(() => {
-    const startDate = new Date();
     Promise.all([getTotalActivity(), getActiveTabRecord()]).then(
       ([activity, activeRecord]) => {
         if (activeRecord?.hostname) {
@@ -26,14 +25,7 @@ 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);
+        setIsLoaded(true);
       },
     );
   }, []);

src/tailwind.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -23,7 +24,7 @@
     --border: 20 5.9% 90%;
     --input: 20 5.9% 90%;
     --ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
+    --radius: 0.75rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;