(improvements) Tax report: improve UX during initial sync

public/locales/en/translations.json

@@ -773,9 +773,12 @@
       "message": "The tax reports generated by this app are for informational purposes only. We do not guarantee accuracy or completeness. Always consult a qualified tax advisor to ensure compliance with current tax laws and personalized advice. Your reliance on the generated reports is at your own risk."
     }, 
     "generation": {
+      "btn": "Generate",
       "success": "Tax Report generated",
       "title": "Your tax report is being generated. This process can take a while.",
-      "note": "If you have a large history it's recommended to keep the window open in the background until it's completed."
+      "note": "If you have a large history it's recommended to keep the window open in the background until it's completed.",
+      "sync_1": "Sync in progress." ,
+      "sync_2": "Please wait until it’s complete to generate your tax report."
     }
   },
   "theme": {

src/components/TaxReport/TaxReport.js

@@ -22,13 +22,14 @@ import {
   getTransactionsDataReceived,
   getTransactionsShowDisclaimer,
 } from 'state/taxReport/selectors'
-import { getIsSyncRequired } from 'state/sync/selectors'
 import { getColumnsWidth } from 'state/columns/selectors'
 import { getFullTime as getFullTimeSelector } from 'state/base/selectors'
+import { getIsSyncRequired, getIsFirstSyncing } from 'state/sync/selectors'
 
 import queryConstants from 'state/query/constants'
 
 import Loader from './TaxReport.loader'
+import SyncNote from './TaxReport.note'
 import Disclaimer from './TaxReport.disclaimer'
 import { getColumns } from './TaxReport.columns'
 
@@ -46,6 +47,7 @@ const TaxReport = () => {
   const columnsWidth = useSelector((state) => getColumnsWidth(state, TYPE))
   const isNoData = isEmpty(entries)
   const isLoading = !dataReceived && pageLoading
+  const isFirstSyncing = useSelector(getIsFirstSyncing)
   const shouldFetchTaxReport = !isSyncRequired && !dataReceived && !isLoading
 
   useEffect(() => {
@@ -65,7 +67,9 @@ const TaxReport = () => {
   )
 
   let showContent
-  if (isLoading) {
+  if (isFirstSyncing) {
+    showContent = <SyncNote />
+  } else if (isLoading) {
     showContent = <Loader />
   } else if (isNoData) {
     showContent = (
@@ -120,7 +124,8 @@ const TaxReport = () => {
           </SectionHeaderItem>
           <RefreshButton
             onClick={onRefresh}
-            disabled={isLoading}
+            label={t('taxreport.generation.btn')}
+            disabled={isFirstSyncing || isLoading}
           />
         </SectionHeaderRow>
       </SectionHeader>

src/components/TaxReport/TaxReport.note.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export const SyncNote = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='sync-note-container'>
+      <div className='sync-note'>
+        <p>{t('taxreport.generation.sync_1')}</p>
+        <p>{t('taxreport.generation.sync_2')}</p>
+      </div>
+    </div>
+  )
+}
+
+export default SyncNote

src/components/TaxReport/_TaxReport.scss

@@ -78,3 +78,16 @@
     position: absolute;
   }
 }
+
+.sync-note {
+  min-width: 340px;
+  text-align: center;
+
+  &-container {
+    height: 45%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+}

src/ui/RefreshButton/RefreshButton.js

@@ -5,7 +5,7 @@ import { Button, Intent } from '@blueprintjs/core'
 
 import { tracker } from 'utils/trackers'
 
-const RefreshButton = ({ onClick, disabled }) => {
+const RefreshButton = ({ onClick, disabled, label }) => {
   const { t } = useTranslation()
 
   const handleClick = () => {
@@ -20,18 +20,20 @@ const RefreshButton = ({ onClick, disabled }) => {
       intent={Intent.SUCCESS}
       className='refresh-button'
     >
-      {t('columnsfilter.title')}
+      {label || t('columnsfilter.title')}
     </Button>
   )
 }
 
 RefreshButton.propTypes = {
+  label: PropTypes.string,
   disabled: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
 }
 
 RefreshButton.defaultProps = {
   disabled: false,
+  label: undefined,
 }
 
 export default memo(RefreshButton)