[Brave News]: Better offline handling & UX tweaks

[fallaciousreasoning]

Resolves brave/brave-browser#35153
Resolves brave/brave-browser#35155
Resolves brave/brave-browser#35154
Resolves brave/brave-browser#35157

Submitter Checklist:

• I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally:
  • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
  • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

Note: When testing this the company VPN should be off, as Brave can't detect the network state and requests hang (this happens for fetch requests from JavaScript too).

1. Start Brave with no internet
2. An error message for "You appear to be offline" should show up
3. Connect
4. Refresh
5. Feed should load
6. Go offline
7. Change feed (should work fine)
8. Refresh
9. Offline message should show
10. (see individual issues for ux tweaks issues)

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[mkarolin]

strings++

[sangwoo108]

LGTM 👍

[sangwoo108]

I'm curious if this is a hacky way to do the same with

(feed.error && errors[feed.error]) ??

, as errors[null] would be undefined anyway

[fallaciousreasoning]

Exactly - errors has an exact list of keys it allows, but I wanted to treat it as a map which may or may not have the key. Just felt it read a bit nicer, but happy to change it 😄

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[stephendonner]

Verification PASSED using

Brave | 1.63.109 Chromium: 120.0.6099.217 (Official Build) nightly (64-bit)
-- | --
Revision | 923ccf5cb23b3696c81c135cddccccbd6db027a2
OS | Windows 10 Version 22H2 (Build 19045.3930)

Case One: brave/brave-browser#35153 - PASSED

Steps:

0. disabled system Wi-Fi / internet connectivity
1. installed 1.63.109
2. launched Brave
3. confirmed error message for "You appear to be offline" was shown
4. reconnect to system Wi-FI / internet connectivity
5. clicked Refresh
6. confirmed feed loaded
7. went offline again/disabled system Wi-FI/ internet connectivity
8. (added CNN and Fox News)
9. refreshed again

Confirmed Your appear to be offline error message was shown

step 0	step 3	step 4	step 5	step 6	step 7	step 8	step 9

Case Two: brave/brave-browser#35155 - PASSED

(Followed steps from issue, above.)

Checked a couple iterations of the loading spinner and no longer see the square outline

example	example

2024-01-11_02h25_11.mp4

Case Three: brave/brave-browser#35154 - PASSED

Steps:

0. disable system Wi-FI / internet connectivity
1. install 1.63.109
2. launch Brave
3. open a new-tab page
4. scroll down
5. click on Turn on Brave News
6. re-enable Wi-Fi
7. wait / click Reload / Refresh etc. on the client-side

Confirmed after re-enabling Wi-Fi and clicking Refresh (or browser's Reload button), the content loads/returns

step 0	example	step 6	example

Case Four: brave/brave-browser#35157 - PASSED

Steps:

1. install 1.63.109
2. launch Brave
3. open a new-tab page
4. scroll down
5. click on Turn on Brave News
6. click Customize
7. click on Brave News
8. remove Top Sources
9. now add at least one (1) each for Channels and Publishers

Confirmed both the Publishers and Channels appear with at least one entry (each), at which point they get the collapse/expand toggle

default	populated, with the expand/collapse arrows (CNN)	Cars

Encountered:

• If feed is empty after unfollowing sources, incorrect message is shown in nightly  brave-browser#35274