fix: always render floating bar

decentraland · Sep 20, 2023 · 8e01c68 · 8e01c68
1 parent 729750f
commit 8e01c68
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/FloatingBar/FloatingBar.css b/src/components/FloatingBar/FloatingBar.css
@@ -7,17 +7,18 @@
   border: 1px solid var(--black-300);
   background: var(--white-900);
   box-shadow: 0 0 25px 0 var(--alpha-black-400);
-  z-index: 200;
   padding: 12px 18px 12px 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  opacity: 0;
   transition: all 0.5s ease 0s;
+  opacity: 1;
+  z-index: 200;
 }
 
-.FloatingBar--visible {
-  opacity: 1;
+.FloatingBar--hidden {
+  opacity: 0;
+  z-index: -1;
 }
 
 .FloatingBar__ProposalSectionActions {

diff --git a/src/components/FloatingBar/FloatingBar.tsx b/src/components/FloatingBar/FloatingBar.tsx
@@ -20,9 +20,10 @@ interface FloatingBarProps {
   showViewReactions: boolean
   scrollToComments: () => void
   scrollToReactions: () => void
-  proposalId: string
-  discourseTopicId: number
-  discourseTopicSlug: string
+  proposalId?: string
+  discourseTopicId?: number
+  discourseTopicSlug?: string
+  isLoadingProposal: boolean
 }
 
 const FloatingBar: React.FC<FloatingBarProps> = ({
@@ -33,12 +34,15 @@ const FloatingBar: React.FC<FloatingBarProps> = ({
   isVisible,
   scrollToComments,
   scrollToReactions,
+  isLoadingProposal,
 }) => {
   const t = useFormatMessage()
   const { comments, isLoadingComments } = useProposalComments(proposalId)
-
+  const showTotalComments = !isLoadingComments && !isLoadingProposal
+  console.log('isVisible', isVisible)
+  console.log('isLoadingProposal', isLoadingProposal)
   return (
-    <div className={classNames('FloatingBar', isVisible && 'FloatingBar--visible')}>
+    <div className={classNames('FloatingBar', !isVisible && !isLoadingProposal && 'FloatingBar--hidden')}>
       <div className="FloatingBar__ProposalSectionActions">
         {showViewReactions && (
           <Link onClick={scrollToReactions} className={'FloatingBar__Action'}>
@@ -47,7 +51,7 @@ const FloatingBar: React.FC<FloatingBarProps> = ({
           </Link>
         )}
         <Link onClick={scrollToComments} className={'FloatingBar__Action'}>
-          {isLoadingComments && (
+          {!showTotalComments && (
             <Loader
               active
               size="tiny"
@@ -57,10 +61,10 @@ const FloatingBar: React.FC<FloatingBarProps> = ({
               )}
             />
           )}
-          {!isLoadingComments && (
+          {showTotalComments && (
             <>
               <Forum color={'var(--black-600)'} />
-              {t('component.floating_bar.total_comments_label', { count: comments?.totalComments })}
+              {t('component.floating_bar.total_comments_label', { count: comments?.totalComments || 0 })}
             </>
           )}
         </Link>

diff --git a/src/pages/proposal.tsx b/src/pages/proposal.tsx
@@ -16,8 +16,8 @@ import { ErrorClient } from '../clients/ErrorClient'
 import { Governance } from '../clients/Governance'
 import { SnapshotApi } from '../clients/SnapshotApi'
 import CategoryPill from '../components/Category/CategoryPill'
-import FloatingBar from '../components/FloatingBar/FloatingBar'
 import ProposalVPChart from '../components/Charts/ProposalVPChart'
+import FloatingBar from '../components/FloatingBar/FloatingBar'
 import ContentLayout, { ContentSection } from '../components/Layout/ContentLayout'
 import MaintenanceLayout from '../components/Layout/MaintenanceLayout'
 import BidSubmittedModal from '../components/Modal/BidSubmittedModal'
@@ -208,10 +208,13 @@ export default function ProposalPage() {
       commentsSectionRef.current.scrollIntoView({ behavior: 'smooth' })
     }
   }
+
   useEffect(() => {
+    setIsBarVisible(true)
+
     const handleScroll = () => {
       const hideBarSectionRef = reactionsSectionRef.current || commentsSectionRef.current
-      if (hideBarSectionRef) {
+      if (!!hideBarSectionRef && !!window) {
         const hideBarSectionTop = hideBarSectionRef.getBoundingClientRect().top
         setIsBarVisible(hideBarSectionTop > window.innerHeight)
       }
@@ -297,15 +300,11 @@ export default function ProposalPage() {
   }, [proposal, account, isDAOCommittee])
 
   useEffect(() => {
-    updatePageStateRef.current({ showProposalSuccessModal: params.get('new') === 'true' })
-  }, [params])
-
-  useEffect(() => {
-    updatePageStateRef.current({ showTenderPublishedModal: params.get('pending') === 'true' })
-  }, [params])
-
-  useEffect(() => {
-    updatePageStateRef.current({ showBidSubmittedModal: params.get('bid') === 'true' })
+    updatePageStateRef.current({
+      showProposalSuccessModal: params.get('new') === 'true',
+      showTenderPublishedModal: params.get('pending') === 'true',
+      showBidSubmittedModal: params.get('bid') === 'true',
+    })
   }, [params])
 
   useEffect(() => {
@@ -425,17 +424,16 @@ export default function ProposalPage() {
                 />
               )}
               <ProposalComments proposal={proposal} ref={commentsSectionRef} />
-              {proposal && !isLoadingSurveyTopics && (
-                <FloatingBar
-                  isVisible={isBarVisible}
-                  showViewReactions={!!showSurveyResults}
-                  scrollToReactions={scrollToReactions}
-                  scrollToComments={scrollToComments}
-                  proposalId={proposal?.id}
-                  discourseTopicId={proposal?.discourse_topic_id}
-                  discourseTopicSlug={proposal?.discourse_topic_slug}
-                />
-              )}
+              <FloatingBar
+                isVisible={isBarVisible}
+                showViewReactions={!!showSurveyResults}
+                scrollToReactions={scrollToReactions}
+                scrollToComments={scrollToComments}
+                proposalId={proposal?.id}
+                discourseTopicId={proposal?.discourse_topic_id}
+                discourseTopicSlug={proposal?.discourse_topic_slug}
+                isLoadingProposal={isLoadingProposal}
+              />
             </Grid.Column>
 
             <Grid.Column tablet="4" className="ProposalDetailActions">