diff --git a/README.md b/README.md
index d93e77b..f03c2f8 100644
--- a/README.md
+++ b/README.md
@@ -29,3 +29,4 @@ Note that this template is meant to be customized. Here are some things you migh
- [ ] The favicons in the [`public/icons`](./public/icons/) folder. You can use [this generator](https://realfavicongenerator.net/) to generate them from an image.
- [ ] The github username and email in the [`integration.yaml`](./.github/workflows/integration.yaml) file.
- [ ] The environment variables in the [`Dockerfile`](./Dockerfile) to match your production environment. Note that this is needed because, as React is a client-side framework, the environment variables are embedded in the build.
+- [ ] The [`shadcn/ui`](https://ui.shadcn.com/) theme. As shadcn/ui is a customizable library, you can use a [pre-defined](https://ui.shadcn.com/themes) theme or create your own by modifying the [`src/index.css`](./src/index.css) file.
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..e24d493
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "default",
+ "rsc": false,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.js",
+ "css": "src/index.css",
+ "baseColor": "slate",
+ "cssVariables": true
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils"
+ }
+}
\ No newline at end of file
diff --git a/e2e/.gitkeep b/e2e/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/e2e/characters-infinite-scroll.spec.ts b/e2e/characters-infinite-scroll.spec.ts
new file mode 100644
index 0000000..576b5e2
--- /dev/null
+++ b/e2e/characters-infinite-scroll.spec.ts
@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+
+test("infinite scroll", async ({ page }) => {
+ await page.goto("/");
+
+ const CARDS_SELECTOR = "li.character-card";
+ const SKELETONS_SELECTOR = "div.character-card-skeleton";
+ const CARDS_PER_PAGE = 20;
+ const SKELETONS_PER_LOAD = 12;
+
+ // Should show 20 skeleton cards before loading
+ await page.waitForSelector(SKELETONS_SELECTOR);
+ const skeletonCards = await page.$$(SKELETONS_SELECTOR);
+ expect(skeletonCards.length).toBe(SKELETONS_PER_LOAD);
+
+ // Should have 20 characters at the beginning after loading
+ await page.waitForSelector(CARDS_SELECTOR);
+ const initialCharacters = await page.$$(CARDS_SELECTOR);
+ expect(initialCharacters.length).toBe(CARDS_PER_PAGE);
+
+ // Scroll to bottom
+ await page.evaluate(() => {
+ window.scrollTo(0, document.body.scrollHeight);
+ });
+
+ // Should show the same amount of skeleton cards after scrolling
+ await page.waitForSelector(SKELETONS_SELECTOR);
+ const skeletonCardsAfterScroll = await page.$$(SKELETONS_SELECTOR);
+ expect(skeletonCardsAfterScroll.length).toBe(SKELETONS_PER_LOAD);
+
+ // Wait until the skeletons disappear
+ await expect(page.locator(SKELETONS_SELECTOR)).toHaveCount(0);
+
+ // Should have 40 characters after loading
+ await page.waitForSelector(CARDS_SELECTOR);
+ const charactersAfterScroll = await page.$$(CARDS_SELECTOR);
+ expect(charactersAfterScroll.length).toBe(CARDS_PER_PAGE * 2);
+});
diff --git a/index.html b/index.html
index 16ee32d..9508184 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
{{ Title }}
-
+