Skip to content

Improve review submission flow UX (loading, errors, success state) - #1

Open
Arem-ee wants to merge 3 commits into
CoinRex-net:mainfrom
Arem-ee:fix/review-submission-ux
Open

Improve review submission flow UX (loading, errors, success state)#1
Arem-ee wants to merge 3 commits into
CoinRex-net:mainfrom
Arem-ee:fix/review-submission-ux

Conversation

@Arem-ee

@Arem-ee Arem-ee commented Aug 29, 2026

Copy link
Copy Markdown

[PR: Improve review submission flow UX

Hey, so this PR is about making the review submission flow feel a lot less confusing and broken feeling when things are loading or when something goes wrong, and it does not touch the eligibility engine or the RexLink SDK or change the four step structure at all, since I know you are already deep in fixing that part yourself and I did not want to step on it or cause any merge headaches for you.

What changed is that when someone starts an eligibility check now, there is an actual loading overlay that shows up and the back and next buttons get disabled while it is checking, because before this the only thing that told you something was happening was a tiny spinner on one button, and people could just click around while it was still checking and get weird contradictory error toasts that did not make any sense.

Also the errors are a lot more specific now, so instead of one generic red toast that just says something went wrong no matter what actually happened, it now tells you exactly what happened, like if your wallet balance is too low, or if that wallet was already used before, or if you got rate limited, or if the provider is just down right now, or if it is a network timeout, and each one comes with a button that makes sense for that situation, like try live instead, or try manual instead, or switch wallet, or just retry.

There is also a proper success screen now after you submit a review, with links to go see your reviews or go back to the project, since before this the only feedback you got was a toast that disappeared pretty fast and then you were just kind of left on the same page wondering if it actually worked or not.

And for the live monitoring option, there is now a progress bar and a little last checked timestamp, so you can actually see it moving instead of just a countdown number sitting there with no other feedback.

One more thing worth mentioning on its own is a small fix in the draft restore logic, that is commit 6879748 separate from the rest, since before this if someone left the page mid way through and came back later, it would force them to re pair their wallet even if their session was still totally valid, and now it does not do that unless it actually needs to, but I traced this through the code carefully and the important part is that the server still independently rechecks eligibility every time regardless of what the client sends, so this is just a smoother experience and does not weaken the actual eligibility gate at all.

Now for the honest part, since I want to be straight with you about how this was tested. I was not able to actually spin up the app locally and click through the whole flow in a real browser, because the local environment needs a database connection and env values I do not have access to, so what I did instead was run php -l on everything to make sure there are no syntax errors, and I built a small jsdom test harness to check that things like the overlay toggling and the wizard nav disabling and the error banner logic all behave correctly in isolation, and I traced the eligibility revalidation path by hand through the actual function calls to confirm the server side check still runs no matter what. So this has been checked pretty carefully, but it has not been smoke tested end to end in a real running instance with your database, so it might be worth you giving it a quick click through yourself before merging, just to be safe, especially since this does touch stuff connected to your eligibility flow even though the eligibility logic itself was never touched.]

…rogress and success panel markup

- CSS: overlay, skeleton, sticky inline alerts, live progress bar, success panel using theme.css tokens only
- PHP: success panel for approved/pending with links to my-reviews/project, overlay and skeleton containers
…nd live progress

- Add persistent loading overlay (#eligibilityLoadingOverlay) and inline skeletons during instant/live checks
- Disable Back/Next, proof method radios and wallet selectors while check pending (setWizardNavDisabled) to prevent contradictory toasts
- Map API status/reason_code to specific sticky inline banners (wallet used, insufficient balance, rate limited, provider unavailable, network/timeout) with action buttons (Retry / Try Live / Try Manual / Switch wallet)
- Keep toasts as secondary; primary visibility via .eligibility-inline-alert inside verificationReport/monitorCard
- Live method: progress bar, elapsed/remaining pct and last-checked relative time via updateLiveProgress, countdown updates fill
Distinct small logic fix (frontend-only, no review_eligibility*.php change):
Restore payload.eligibility_ok / wallet_ownership_verified when draft wallet
still matches account wallet instead of always resetting to false. Schedules
pollEligibilityStatus revalidation so stale flags are server-checked. Keeps PR
UX work separate for easy review.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant