Comments (9)
good find, would happily accept a PR that solves this while keeping the visuals the same / compatibly similar
from dashboard.
In the sandbox, the Image loading is quite slow because the request is sent after JS execution. I wanted to preload the image in the sandbox but I couldn't do it because Codesandbox changes the URL of the image request sent via JS compared to the one preloaded in the HTML file. The Image would be loaded much earlier in the Thirdweb's Next.js app. Also, the image I have used is not perfect - it's quite large (~500kB) and should be optimized to improve image loading
I have created an optimized image. If you check the sandbox's public folder - there are two versions of the image - a WebP (~100kB) and a PNG (~500kB). WebP looks almost as good as PNG one but it has some artifacts of compression (only visible when you look really closely).
I used the Google Chrome team's Squoosh App to optimize the PNG to WebP but I'm not 100% satisfied with the output so I used the PNG one for the demo sandbox. I would like to try out a few more tools to optimize the PNG size without compromising the quality. I don't trust Nextjs's Image component to do that properly for a gradient image, So we will have to do it manually.
Once we have an optimized image, We can start with the preloading approach, it should load the image super quickly (and also try the fade-in animation on the image like the sandbox to gracefully load the image) but if that does not feel good and we want to start rendering the UI with the image already there, then we can try out the base64 encoding approach and compare which feels the best ( and also test its impact on page load perf metrics like FCP and LCP )
I'm happy to do a PR for this - but I will be quite busy this week and may not be able to work on it this week. If you are fine with that, you can leave this one to me 👍
(However, If you do decide to implement it yourself, Make sure to add overflow:hidden
style to your App container element (not the body!) to make sure there are no horizontal and vertical overflows caused by aurora images - refer to the sandbox for example )
from dashboard.
All sounds good, will see if we get to it this week but likely won't so unless otherwise noted this one is all yours! 🎉
from dashboard.
fixed, thx - it does need a max width otherwise it ends up wayy to big on large resolutions but 66vw was too small
from dashboard.
@jnsdls I created an aurora image using Figma and a react sandbox to try it out
Check out this Sandbox ( Code )
What do you think?
from dashboard.
@MananTank looks good! my only concern would be the possibility of the image "popping in" but it seems like you've largely solved that. I also think depending on how large the aurora is we may be able to prioritize the loading of it / embed it as base64 if absolutely necessary (or mark it as needing to be pre-loaded at least)
do you want to take a stab at making a PR to replace the css blur gradient with your aurora png approach?
from dashboard.
All sounds good, will see if we get to it this week but likely won't so unless otherwise noted this one is all yours! 🎉
I lied, merged it just now - but there's more to do on perf side for sure
from dashboard.
@jnsdls 🚨
The Aurora blur appears to be much smaller than it used to be - It looks a bit weird now
Before: https://thirdweb-n9d5q39ri.thirdweb-preview.com/
After: https://thirdweb-ipuya0hks.thirdweb-preview.com/
Looks like the issue is the max-width: 66vw
style shown below - removing it seems to be fixing this issue
from dashboard.
@jnsdls I think the current max-width:80vw
is also a bit too small for regular desktop screen size. I would suggest doing the same thing that I have done in the sandbox and avoid setting max-widths altogether.
- Put the image inside the section (element with max-width)
- use
width:200%
+max-width:none
on the image ( you can use continue using 400% for mobile/tablet )
This will make it so that the image has the proper size (X% of section width) no matter what the device-width
See the below video for Example:
aurora-resizable.mp4
from dashboard.
Related Issues (20)
- can't run yarn build HOT 3
- Contract Verification issue on dashboard
- Trying to `yarn dev` and getting a bunch of error HOT 3
- Pagination visual bug HOT 3
- Issue when open the directory URL after uploading to IPFS
- Embed Preview Not Loading HOT 5
- Slow page: thirdweb.com/dashboard/rpc
- [Feature]: Metamask Interaction within our PCs aside from a QR scan HOT 2
- "Suggestions for Updating Read Code Snippets in Dashboard Documentation"
- MetaMask Wallet Errors in Console HOT 1
- Incorrect Getting Started code snippet for custom network HOT 2
- Inaccurate gas estimation for Marketplace
- NFT table row requires clicking twice to render TokenIdPage component HOT 1
- Zilliqa EVM Testnet (assume same issue on Zilliqa EVM Mainnet) Gas price 100000000000 lower than minimum allowable 4761904761904 HOT 3
- Cannot import a source verified contract on BNB Smart Chain Testnet (97) HOT 1
- It seems like there is a version issue with @tanstack/react-query. HOT 1
- Taiko A6 upcoming testnet support + TBA integration HOT 1
- Invalid links throughout dashboard website HOT 2
- Claim Phase unexpected beahviour when setting Allowlist HOT 1
- Cannot verify Polygon Amoy contract HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dashboard.