| Name |
Last commit
|
Last Update |
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .eslintrc.cjs | ||
| .gitignore | ||
| .prettierrc.mjs | ||
| bun.lock | ||
| index.html | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||
| vercel.json | ||
| vite.config.js |
Ensure the header logo is shown only after the image has fully loaded to eliminate flicker:
• Introduced `logoLoaded` state to track image load completion.
• Pre-loaded the logo using `new Image()` inside a `useEffect` hook and set state on `onload`.
• Replaced the previous Skeleton wrapper with a stacked layout:
– A `Skeleton.Image` placeholder is rendered while the logo is loading.
– The real `<img>` element fades in with an opacity transition once both global
`isLoading` and `logoLoaded` are true.
• Added automatic reset of `logoLoaded` whenever the logo source changes.
• Removed redundant `onLoad` on the `<img>` tag to avoid double triggers.
• Ensured placeholder and image sizes match via absolute positioning to prevent layout shift.
This delivers a smoother visual experience by keeping the skeleton visible until the logo is completely ready and then revealing it seamlessly.
| Name |
Last commit
|
Last Update |
|---|---|---|
| .. | ||
| public | Loading commit data... | |
| src | Loading commit data... | |
| .eslintrc.cjs | Loading commit data... | |
| .gitignore | Loading commit data... | |
| .prettierrc.mjs | Loading commit data... | |
| bun.lock | Loading commit data... | |
| index.html | Loading commit data... | |
| package.json | Loading commit data... | |
| postcss.config.js | Loading commit data... | |
| tailwind.config.js | Loading commit data... | |
| vercel.json | Loading commit data... | |
| vite.config.js | Loading commit data... |