Merge pull request #733 from WatchItDev/app/fix/redux

fix: header skeleton

Author: geolffreym

src/components/carousel/variants/carousel-top-titles.tsx

@@ -45,7 +45,7 @@ export default function CarouselTopTitles({ posts, category }: Readonly<Carousel
       >
         <Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
           {posts.map((post: Post) => (
-            <Box key={`${category}-${post.id}`} sx={{ px: 0.75, height: '100%' }}>
+            <Box key={`${category}-${post.id}`} sx={{ height: '100%' }}>
               <PosterTopTitles post={post} />
             </Box>
           ))}

src/hooks/use-account-session.ts

@@ -48,7 +48,7 @@ export const useAccountSession = (): UseAccountSessionHook => {
   const [loginInProgress, setLoginInProgress] = useState(false);
   const [verifyingUser,   setVerifyingUser]   = useState(false);
   const [userChecked,     setUserChecked]     = useState(false);
-  const [initializing,    setInitializing]    = useState(!restoreDone);
+  const [initializing,    setInitializing]    = useState(true);
 
   const sessionRef       = useRef(session);
   const lastVerifiedRef  = useRef<Address | null>(null);
@@ -158,23 +158,40 @@ export const useAccountSession = (): UseAccountSessionHook => {
         }
       } catch {
         await logout();
-      } finally {
-        setUserChecked(true);
-        setInitializing(false);
       }
     })();
   }, [logout]);
 
+  const handleConnected = async () => {
+    try {
+      await syncAddress();
+    } finally {
+      handleReady();
+    }
+  };
+
+  const handleReady = () => {
+    setUserChecked(true);
+    setInitializing(false);
+  };
+
+  const verifyStatus = () => {
+    if (web3Auth.status === 'connected' || web3Auth.status === 'ready') handleReady();
+  };
+
   useEffect(() => {
     if (!web3Auth || listenerAttached) return;
     listenerAttached = true;
+    verifyStatus();
 
     web3Auth.on(ADAPTER_EVENTS.DISCONNECTED, logout);
-    web3Auth.on(ADAPTER_EVENTS.CONNECTED,    syncAddress);
+    web3Auth.on(ADAPTER_EVENTS.CONNECTED,    handleConnected);
+    web3Auth.on(ADAPTER_EVENTS.READY,        handleReady);
 
     return () => {
       web3Auth.off(ADAPTER_EVENTS.DISCONNECTED, logout);
-      web3Auth.off(ADAPTER_EVENTS.CONNECTED,    syncAddress);
+      web3Auth.off(ADAPTER_EVENTS.CONNECTED,    handleConnected);
+      web3Auth.off(ADAPTER_EVENTS.READY,        handleReady);
       listenerAttached = false;
     };
   }, [web3Auth, logout]);

src/layouts/_common/account-popover/index.tsx

@@ -28,13 +28,13 @@ export function AccountPopover() {
   const router = useRouter();
   const popover = usePopover();
   const { isLoginModalOpen, isAuthLoading } = useAuth();
-  const { initializing } = useAccountSession();
+  const { initializing, loading: sessionLoading } = useAccountSession();
 
   if (isAuthLoading) {
     return <CircularProgress size={24} sx={{ color: '#fff' }} />;
   }
 
-  if (initializing) {
+  if (initializing || sessionLoading) {
     return (
       <Skeleton
         variant="rounded"

src/pages/ownership.tsx

@@ -28,8 +28,6 @@ export default function FileManagerPage() {
       ) : (
         <BlankView>
           <ComingSoonView
-            deadline={'03/30/2025 21:30'}
-            showDeadline={true}
             content={
               "The Ownership is evolving! Soon, you'll gManage digital rights, track licensing, and unlock the power of decentralized ownership. Stay tuned!"
             }

src/pages/studio.tsx

@@ -14,8 +14,6 @@ export default function OverviewFilePage() {
     >
       <BlankView>
         <ComingSoonView
-          deadline={'03/30/2025 21:30'}
-          showDeadline={true}
           content={
             "The Studio is evolving! Soon, you'll generate new content and enhance your creations with AI-driven tools for metadata, images, subtitles, voiceovers, and security checks. Stay tuned!"
           }

src/sections/explore/components/explore-top-publications.skeleton.tsx

@@ -9,7 +9,7 @@ export const ExploreTopPublicationsSkeleton: React.FC = () => {
         variant="rectangular"
         width={'100%'}
         height={'100%'}
-        sx={{ mb: 1, mx: 0.5, mt: 2, borderRadius: 1 }}
+        sx={{ mb: 1 }}
       />
       <Box
         sx={{

src/sections/publication/views/publication-details-view.tsx

@@ -52,14 +52,14 @@ export default function PublicationDetailsView({ id }: Readonly<PublicationDetai
   const { campaign, loading: campaignLoading, fetchSubscriptionCampaign } = useGetSubscriptionCampaign();
   const { isActive: isCampaignActive, loading: isActiveLoading, fetchIsActive } = useGetCampaignIsActive();
   const [loadPublications, { data: profilePublications, loading: profilePublicationsLoading }] = useGetPostsByAuthorLazyQuery();
-  const [initialized, setInitialized] = useState(false);
 
   const isAccessFullyChecked = !accessLoading && !isAuthorizedLoading && !isActiveLoading && !campaignLoading;
   const allLoaded = !publicationLoading && !isAuthLoading && !profilePublicationsLoading && isAccessFullyChecked;
   const isSponsoredButtonVisible = isCampaignActive && isAuthorized && isAccessFullyChecked;
   const isJoinButtonVisible = isAuthorized && !isCampaignActive && isAccessFullyChecked && !isSponsoredButtonVisible;
   const isPlayerVisible = hasAccess && session.authenticated && !accessLoading && !isAuthLoading;
-  const loading = !initialized || (initialized && !publication);
+  const accessChecked = hasAccess !== undefined;
+  const loading = (!(allLoaded && accessChecked) && !isAuthLoading) || !publication;
 
   useEffect(() => {
     if (!ownerAddress || publicationLoading || profilePublications?.getPostsByAuthor) return;
@@ -77,12 +77,6 @@ export default function PublicationDetailsView({ id }: Readonly<PublicationDetai
     loadPublication({variables: { getPostId: id }});
   }, [id, publication]);
 
-  useEffect(() => {
-    if (allLoaded && !initialized) {
-      setInitialized(true);
-    }
-  }, [allLoaded, initialized]);
-
   const handleSubscribe = () => {
     if (!session.authenticated) {
       dispatch(openLoginModal());