Check out what's happening right now on https://undraw.netlify.com/ when you resize the viewport.

The image flickers and feels very unnatural.

Initial search functionality uses a simple typeahead of file names to search for an image.

In this step,

1. Create a JSON object of file name to keyword mapping
2. use Algolia to create indexes of file name & keyword mapping
3. Replace the search functionality

What?

Scrolling with page/arrow up/down doesn't work.
It needs to be handled in user-land code.

How?

Refer to Brian's response on one of the issues.

bvaughn/react-window#46 (comment)

@all-contributors bot please add @dance2die for code, design, ideas, infra

What?

Add a "Download" link on hover.

Additional Context

Currently hovering on an image only shows a list of tags associated with the image in a gradient gray background on a white background.

Bring down "Download" link on the top portion of the tag (in slightly lighter gray tone)

To do's

1. - Add image description
2. - Update margin/padding

Below are the lists to take progressively to turn the search page as a PWA.

🧠 Caching Strategy

• Cache first: The site content will rarely change. So I am going to try to fetch from cache first
• Essential assets such as fonts, CSS and JS will be cached initially

⭐ Caching assets

1. [ ] Cache Google Fonts & CSS
- [ ] Show a shimmer effect as an image place holder

• When an image is displayed, add it to cache
  - [ ] Add a button to cache ALL images (should display a big warning for mobile users)

🔌 Offline

1. Add a "You are offline message on the top"
2. Create an offline page - Scrolling will fetch data from cache OR shimmer

🏡 Home Page

• Add an option to enable adding to home screen.
• Create a slash screen using the theme color "#e91e63"

Initially, go with a simple "TypeAhead" strategy by dogfooding my NPM library, @cshooks/usetrie

Later on,

1. Create a JSON object of file name to keyword mapping
2. use Algolia to create indexes of file name & keyword mapping
3. Replace the search functionality

Run SVGO on all SVG files.

So two download links

1. "Download": Full SVG vrsion
2. "Download Optimized": SVGO optimized image - smaller most of the time.

Not a high priority but one of those "nice-to-have" features.

Page content

• Create a new "About" page
• [x] Highlight currently selected page - https://reach.tech/router/example/active-links
• Add explanation of what this site is about
  • An "Offline First" strategy PWA site for searching Undraw.co image.
  • Add a warning about data usage
• Credits
  • Give a credit to Undraw first
    • Original location to undraw.co
    • Specify a non-affiliation
  • Credit to unofficial mirror GitHub repo
• Add a License

It's fast but can feel a bit of lag while typing