CorentinTh / it-tools

Collection of handy online tools for developers, with great UX.
https://it-tools.tech
GNU General Public License v3.0
23.1k stars 2.8k forks source link

feat(emoji-picker) implement lazy loading to improve initial load/search performance and user experience updates #1374

Open gitmotion opened 3 weeks ago

gitmotion commented 3 weeks ago

@CorentinTh related to: https://github.com/CorentinTh/it-tools/issues/1176

Before After
demo demo
Eagerly loaded the entire list of emojis Lazy loading implemented to load only the first 30 emojis from each group
Search would remove the list below and then have to reload the entire list again Search retains initially loaded list so it does not have to reload the entire list for better performance
Included "Load More" and "Load All" buttons to allow users to view the entire list if desired
Added collapsible Group Headers for improved navigation on the page and mobile experience
Retains all previous functionalities, including search and emoji copy actions
image image
Want this change? Check it out here: (https://gitmotion-it-tools-beta.vercel.app/emoji-picker) You can use my image in your docker-compose file if you want this functionality along with my other additions until the main branch has been updated. [view full list of features added in readme](https://github.com/gitmotion/it-tools/tree/gitmotion/main) ## Installation methods | Docker Image | Local Installation | |-----------------------------------------|-----------------------------------------------------------------------------------------------------------------------------| | `ghcr.io/gitmotion/it-tools:latest` | `git clone -b gitmotion/main https://github.com/gitmotion/it-tools.git && cd it-tools/ && pnpm i && pnpm dev` | | replace your current image with this image | copy & paste oneliner (from github repo) | | You may need to clear cache and hard reload to get new features loading | Installing packages for the first time may take some time; please wait until it finishes |
vercel[bot] commented 3 weeks ago

@gitmotion is attempting to deploy a commit to the Corentin Thomasset's Team Team on Vercel.

A member of the Team first needs to authorize it.

sonarcloud[bot] commented 3 weeks ago

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud