feat: display blur placeholder while the image is loaded

.github/workflows/ci.yml

@@ -0,0 +1,37 @@
+name: CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  run_ci:
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Install dependencies (with cache)
+        uses: bahmutov/npm-install@HEAD
+
+      - name: Lint
+        run: yarn linter
+
+      - name: Commits messages
+        uses: wagoid/commitlint-github-action@v4
+
+      - name: Build
+        run: yarn build

components/Logo/index.tsx

@@ -7,24 +7,30 @@ export function Logo() {
   const { mode } = useThemeState();
   const { t } = useI18nState();
 
-  return mode === 'light' ? (
+  const isDarkMode = mode === 'dark';
+
+  return isDarkMode ? (
     <Image
-      src="/static/light-logo.svg"
+      src="/static/dark-logo.svg"
       alt={t.heading.meme_generator_description}
       aria-label={t.heading.meme_generator_description}
       width={383}
       height={155}
       objectFit="contain"
+      placeholder="blur"
+      blurDataURL="/static/dark-logo.svg"
       priority
     />
   ) : (
     <Image
-      src="/static/dark-logo.svg"
+      src="/static/light-logo.svg"
       alt={t.heading.meme_generator_description}
       area-label={t.heading.meme_generator_description}
       width={383}
       height={155}
       objectFit="contain"
+      placeholder="blur"
+      blurDataURL="/static/light-logo.svg"
       priority
     />
   );