Fix some page load issues

Author: shiro

src/LazyImage.tsx

@@ -3,12 +3,6 @@ import cn from "classnames";
 import { Component, ComponentProps, JSX } from "solid-js";
 import { breakpoint, withStyle } from "~/style/commonStyle";
 
-const isImageCached = (url: string) => {
-  const img = new Image();
-  img.src = url;
-  return img.complete;
-};
-
 interface Props extends ComponentProps<"img"> {
   style?: JSX.CSSProperties;
   class?: string;
@@ -24,12 +18,13 @@ export interface LazyImageMeta {
 const LazyImage: (meta: LazyImageMeta) => Component<Props> =
   (meta) => (props) => {
     const { class: $class, style, ...rest } = $destructure(props);
+    let imageRef!: HTMLImageElement;
     let hasJS = $signal(false);
     let loaded = $signal(false);
 
     $effect(() => {
       hasJS = true;
-      loaded = isImageCached(meta.url);
+      loaded ||= imageRef.complete;
     });
 
     return (
@@ -43,11 +38,10 @@ const LazyImage: (meta: LazyImageMeta) => Component<Props> =
           "--color2": meta.gradient[0],
         }}>
         <img
+          ref={imageRef}
           class={cn({ hasJS, loaded })}
+          onLoad={() => { loaded = true; }}
           src={meta.url}
-          onload={() => {
-            loaded = true;
-          }}
           {...rest}
         />
       </div>
@@ -76,11 +70,11 @@ const _LazyImage = css`
     height: 100%;
     object-fit: inherit;
     // hide text when loading image
-    text-indent: 100%;
+    font-size: 0;
 
     @supports (animation-name: fadeIn) {
       opacity: 0;
-      animation: fadeIn 200ms 4s forwards;
+      animation: fadeIn 200ms 1s forwards;
     }
     @keyframes fadeIn {
       0% {

src/app.tsx

@@ -9,6 +9,8 @@ import Header from "~/Header";
 import { config } from "~/config";
 import { routes } from "~/routes";
 import { lazy } from "solid-lazy-plus";
+import { css } from "@linaria/core";
+import { style } from "~/style/styleUtilTS";
 
 const Preload = lazy(() => import("./preload"));
 
@@ -20,6 +22,7 @@ export default function App() {
         root={(props) => {
           return (
             <>
+              {/* <style innerText={headCSS}/> */}
               <Title>Blog of a programming rabbit</Title>
               <Meta
                 name="description"
@@ -42,3 +45,7 @@ export default function App() {
     </MetaProvider>
   );
 }
+
+const headCSS = style`
+  body > * { visibility: hidden; }
+`;

src/style/global.style.tsx

@@ -61,6 +61,8 @@ export const globals = css`
       text-rendering: optimizeLegibility;
 
       ${text("primary", "body", "colors/text-600a")}
+
+      // > * { visibility: initial !important; }
     }
 
     em {