Clear cache fix & added sync states #883
Conversation
| @@ -11,7 +11,7 @@ declare const MINIFRONT_URL: string; | |||
|
|
|||
| export const localDefaults: LocalStorageState = { | |||
| wallets: [], | |||
| fullSyncHeight: 0, | |||
| fullSyncHeight: undefined, | |||
There was a problem hiding this comment.
This is sort of a bug somewhat relating to: #882.
0 sync height indicates that we've synced the genesis block. So undefined should be used as the proper default indicating no sync has been done. Lots of changes in components flow from this one change.
| await chrome.runtime.sendMessage(ServicesMessage.ClearCache); | ||
| useStore.setState(state => { | ||
| state.network.fullSyncHeight = undefined; | ||
| }); |
There was a problem hiding this comment.
Two things happening here:
- Awaiting cache clearing to finish
- resetting zustand sync height
Only after this do we navigate. Sometimes this can be slower, so added a loading state.
| <motion.div | ||
| className='flex w-full flex-col gap-1' | ||
| initial={{ opacity: 0 }} | ||
| animate={{ opacity: 1, transition: { duration: 0.3, ease: 'easeOut', delay: 0.75 } }} |
There was a problem hiding this comment.
Set a short delay. If not, flickers the screen.
There was a problem hiding this comment.
Not sure I understand what flickers, but setting a hard-coded time delay to avoid flicker feels a little hacky to me, since whether it works depends on the speed of the user's computer. Is there not a deterministic way to prevent flicker?
There was a problem hiding this comment.
Here's without it. Essentially, we need a sort of UI debouncer to prevent it. I found a slight animation delay is sufficient, but perhaps there is a better way 🤔
Screen.Recording.2024-04-05.at.5.53.03.AM.mov
| @@ -56,7 +90,7 @@ const SyncingState = ({ fullSyncHeight, latestKnownBlockHeight }: SyncingStatePr | |||
| return ( | |||
| <motion.div | |||
| className='flex w-full flex-col items-center gap-1' | |||
| initial={{ opacity: 1 }} | |||
| initial={{ opacity: 0 }} | |||
grod220
force-pushed
the
block-sync-states
branch
from
417e642 to
95e8214
Compare
grod220
force-pushed
the
block-sync-states
branch
from
95e8214 to
cfa0e0a
Compare
grod220
requested review from
jessepinho,
Valentine1898,
TalDerei and
turbocrime
| @@ -12,7 +12,9 @@ export const LargeBlockSyncStatus = ({ | |||
| error, | |||
| }: BlockSyncProps) => { | |||
| if (error) return <BlockSyncErrorState error={error} />; | |||
| if (!latestKnownBlockHeight || !fullSyncHeight) return <div />; | |||
| if (!latestKnownBlockHeight || !fullSyncHeight) { | |||
There was a problem hiding this comment.
Shouldn't this be checking for !== undefined? Since 0n now means that the first block has synced?
There was a problem hiding this comment.
Aha! This edge case is the gift that keeps on giving.
| <motion.div | ||
| className='flex w-full flex-col gap-1' | ||
| initial={{ opacity: 0 }} | ||
| animate={{ opacity: 1, transition: { duration: 0.3, ease: 'easeOut', delay: 0.75 } }} |
There was a problem hiding this comment.
Not sure I understand what flickers, but setting a hard-coded time delay to avoid flicker feels a little hacky to me, since whether it works depends on the speed of the user's computer. Is there not a deterministic way to prevent flicker?
Closes #824
Does two main things:
vid_compressed.mp4