Put an end to my useMemo craze + fixed ios

2022-12-04 15:31:11 +01:00 · 2022-12-04 15:31:11 +01:00 · 6a1be38613
parent c356679813
commit 6a1be38613
44 changed files with 3887 additions and 3297 deletions
--- a/README.md
+++ b/README.md
@ -25,7 +25,7 @@
 #### [Front](https://github.com/Accords-Library/accords-library.com) (this repository)

 - Language: [TypeScript](https://www.typescriptlang.org/)
- Framework: [Next.js 12](https://nextjs.org/) (React 18)
+- Framework: [Next.js 13](https://nextjs.org/) (React 18)
 - Queries: [GraphQL Code Generator](https://www.graphql-code-generator.com/)
  - Fetch the GraphQL schema from the GraphQL back-end endpoint
  - Read the operations and fragments stored as graphql files in the `src/graphql` folder
--- a/next.config.js
+++ b/next.config.js
@ -6,7 +6,6 @@ const locales = ["en", "es", "fr", "pt-br", "ja"];

 /* @type {import('next').NextConfig} */
 module.exports = {
-  swcMinify: true,
  reactStrictMode: true,
  poweredByHeader: false,
  i18n: {
--- a/public/local-data/currencies.json
+++ b/public/local-data/currencies.json
@ -1 +1,91 @@
-{"currencies":{"data":[{"id":"1","attributes":{"code":"EUR","symbol":"€","rate_to_usd":1.036166,"display_decimals":true}},{"id":"2","attributes":{"code":"CAD","symbol":"$","rate_to_usd":0.79319156,"display_decimals":true}},{"id":"3","attributes":{"code":"USD","symbol":"$","rate_to_usd":1,"display_decimals":true}},{"id":"4","attributes":{"code":"JPY","symbol":"¥","rate_to_usd":0.0083864261,"display_decimals":false}},{"id":"5","attributes":{"code":"BRL","symbol":"R$","rate_to_usd":0.19904328,"display_decimals":true}},{"id":"6","attributes":{"code":"GBP","symbol":"£","rate_to_usd":1.3181323,"display_decimals":true}},{"id":"7","attributes":{"code":"AUD","symbol":"$","rate_to_usd":0.7422,"display_decimals":true}},{"id":"8","attributes":{"code":"INR","symbol":"₹","rate_to_usd":0.013162881,"display_decimals":false}},{"id":"9","attributes":{"code":"NZD","symbol":"$","rate_to_usd":0.69089984,"display_decimals":true}},{"id":"10","attributes":{"code":"CHF","symbol":"CHF","rate_to_usd":1.0728706,"display_decimals":true}}]}}
+{
+  "currencies": {
+    "data": [
+      {
+        "id": "1",
+        "attributes": {
+          "code": "EUR",
+          "symbol": "€",
+          "rate_to_usd": 1.036166,
+          "display_decimals": true
+        }
+      },
+      {
+        "id": "2",
+        "attributes": {
+          "code": "CAD",
+          "symbol": "$",
+          "rate_to_usd": 0.79319156,
+          "display_decimals": true
+        }
+      },
+      {
+        "id": "3",
+        "attributes": { "code": "USD", "symbol": "$", "rate_to_usd": 1, "display_decimals": true }
+      },
+      {
+        "id": "4",
+        "attributes": {
+          "code": "JPY",
+          "symbol": "¥",
+          "rate_to_usd": 0.0083864261,
+          "display_decimals": false
+        }
+      },
+      {
+        "id": "5",
+        "attributes": {
+          "code": "BRL",
+          "symbol": "R$",
+          "rate_to_usd": 0.19904328,
+          "display_decimals": true
+        }
+      },
+      {
+        "id": "6",
+        "attributes": {
+          "code": "GBP",
+          "symbol": "£",
+          "rate_to_usd": 1.3181323,
+          "display_decimals": true
+        }
+      },
+      {
+        "id": "7",
+        "attributes": {
+          "code": "AUD",
+          "symbol": "$",
+          "rate_to_usd": 0.7422,
+          "display_decimals": true
+        }
+      },
+      {
+        "id": "8",
+        "attributes": {
+          "code": "INR",
+          "symbol": "₹",
+          "rate_to_usd": 0.013162881,
+          "display_decimals": false
+        }
+      },
+      {
+        "id": "9",
+        "attributes": {
+          "code": "NZD",
+          "symbol": "$",
+          "rate_to_usd": 0.69089984,
+          "display_decimals": true
+        }
+      },
+      {
+        "id": "10",
+        "attributes": {
+          "code": "CHF",
+          "symbol": "CHF",
+          "rate_to_usd": 1.0728706,
+          "display_decimals": true
+        }
+      }
+    ]
+  }
+}
--- a/public/local-data/languages.json
+++ b/public/local-data/languages.json
@ -1 +1,36 @@
-{"languages":{"data":[{"id":"1","attributes":{"name":"French","code":"fr","localized_name":"Français"}},{"id":"2","attributes":{"name":"English","code":"en","localized_name":"English"}},{"id":"3","attributes":{"name":"Japanese","code":"ja","localized_name":"日本語"}},{"id":"4","attributes":{"name":"Spanish","code":"es","localized_name":"Español"}},{"id":"6","attributes":{"name":"Portuguese (Brazil)","code":"pt-br","localized_name":"Português (Brasil)"}},{"id":"8","attributes":{"name":"German","code":"de","localized_name":"Deutsch"}},{"id":"9","attributes":{"name":"Italian","code":"it","localized_name":"Italiano"}},{"id":"10","attributes":{"name":"Russian","code":"ru","localized_name":"русский"}},{"id":"11","attributes":{"name":"Korean","code":"ko","localized_name":"한국어"}},{"id":"12","attributes":{"name":"Chinese (Traditional)","code":"zh-cht","localized_name":"中文(繁體)"}}]}}
+{
+  "languages": {
+    "data": [
+      { "id": "1", "attributes": { "name": "French", "code": "fr", "localized_name": "Français" } },
+      { "id": "2", "attributes": { "name": "English", "code": "en", "localized_name": "English" } },
+      { "id": "3", "attributes": { "name": "Japanese", "code": "ja", "localized_name": "日本語" } },
+      { "id": "4", "attributes": { "name": "Spanish", "code": "es", "localized_name": "Español" } },
+      {
+        "id": "6",
+        "attributes": {
+          "name": "Portuguese (Brazil)",
+          "code": "pt-br",
+          "localized_name": "Português (Brasil)"
+        }
+      },
+      { "id": "8", "attributes": { "name": "German", "code": "de", "localized_name": "Deutsch" } },
+      {
+        "id": "9",
+        "attributes": { "name": "Italian", "code": "it", "localized_name": "Italiano" }
+      },
+      {
+        "id": "10",
+        "attributes": { "name": "Russian", "code": "ru", "localized_name": "русский" }
+      },
+      { "id": "11", "attributes": { "name": "Korean", "code": "ko", "localized_name": "한국어" } },
+      {
+        "id": "12",
+        "attributes": {
+          "name": "Chinese (Traditional)",
+          "code": "zh-cht",
+          "localized_name": "中文(繁體)"
+        }
+      }
+    ]
+  }
+}
--- a/public/local-data/websiteInterfaces.json
+++ b/public/local-data/websiteInterfaces.json
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@ -1,10 +1,8 @@
 import Head from "next/head";
-import { useMemo } from "react";
 import { useSwipeable } from "react-swipeable";
 import { layout } from "../../design.config";
 import { Ico, Icon } from "./Ico";
 import { MainPanel } from "./Panels/MainPanel";
-import { SafariPopup } from "./Panels/SafariPopup";
 import { isDefined, isUndefined } from "helpers/others";
 import { cIf, cJoin } from "helpers/className";
 import { OpenGraph, TITLE_PREFIX, TITLE_SEPARATOR } from "helpers/openGraph";
@ -77,10 +75,7 @@ export const AppLayout = ({
    },
  });

-  const turnSubIntoContent = useMemo(
-    () => isDefined(subPanel) && isUndefined(contentPanel),
-    [contentPanel, subPanel]
-  );
+  const turnSubIntoContent = isDefined(subPanel) && isUndefined(contentPanel);

  return (
    <div
@ -227,7 +222,6 @@ export const AppLayout = ({
          />
        )}
      </div>
-      <SafariPopup />
    </div>
  );
 };
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@ -1,6 +1,6 @@
 import Markdown from "markdown-to-jsx";
 import { useRouter } from "next/router";
-import React, { Fragment, useMemo } from "react";
+import React, { Fragment } from "react";
 import ReactDOMServer from "react-dom/server";
 import { HorizontalLine } from "components/HorizontalLine";
 import { Img } from "components/Img";
@ -35,11 +35,8 @@ export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Eleme
  const { showLightBox } = useAtomGetter(atoms.lightBox);

  /* eslint-disable no-irregular-whitespace */
-  const text = useMemo(
-    () => `${preprocessMarkDawn(rawText, playerName)}
-  `,
-    [playerName, rawText]
-  );
+  const text = `${preprocessMarkDawn(rawText, playerName)}
+  `;
  /* eslint-enable no-irregular-whitespace */

  if (isUndefined(text) || text === "") {
@ -219,19 +216,17 @@ export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Eleme
 interface TableOfContentsProps {
  text: string;
  title?: string;
-
  horizontalLine?: boolean;
 }

 export const TableOfContents = ({
  text,
  title,
-
  horizontalLine = false,
 }: TableOfContentsProps): JSX.Element => {
  const router = useRouter();
  const langui = useAtomGetter(atoms.localData.langui);
-  const toc = useMemo(() => getTocFromMarkdawn(preprocessMarkDawn(text), title), [text, title]);
+  const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title);

  return (
    <>
@ -268,8 +263,7 @@ interface HeaderProps {

 const Header = ({ level, title, slug }: HeaderProps): JSX.Element => {
  const isHoverable = useDeviceSupportsHover();
-  const innerComponent = useMemo(
-    () => (
+  const innerComponent = (
    <>
      <div className="ml-10 flex place-items-center gap-4">
        {title === "* * *" ? (
@ -287,8 +281,6 @@ const Header = ({ level, title, slug }: HeaderProps): JSX.Element => {
        />
      </div>
    </>
-    ),
-    [isHoverable, slug, title]
  );

  switch (level) {
@ -349,8 +341,7 @@ const TocLevel = ({
  allowIntersection = true,
 }: LevelProps): JSX.Element => {
  const router = useRouter();
-
-  const ids = useMemo(() => tocchildren.map((child) => child.slug), [tocchildren]);
+  const ids = tocchildren.map((child) => child.slug);
  const currentIntersection = useIntersectionList(ids);

  return (
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { MouseEventHandler, useCallback, useMemo } from "react";
+import { MouseEventHandler, useCallback } from "react";
 import { Ico, Icon } from "components/Ico";
 import { ToolTip } from "components/ToolTip";
 import { cIf, cJoin } from "helpers/className";
@ -39,10 +39,7 @@ export const NavOption = ({
  onClick,
 }: Props): JSX.Element => {
  const router = useRouter();
-  const isActive = useMemo(
-    () => active || router.asPath.startsWith(url),
-    [active, router.asPath, url]
-  );
+  const isActive = active || router.asPath.startsWith(url);

  return (
    <ToolTip
--- a/src/components/Panels/SafariPopup.tsx
+++ b/src/components/Panels/SafariPopup.tsx
@ -1,45 +0,0 @@
-import { useMemo } from "react";
-import UAParser from "ua-parser-js";
-import { useIsClient, useSessionStorage } from "usehooks-ts";
-import { Button } from "components/Inputs/Button";
-import { Popup } from "components/Containers/Popup";
-import { sendAnalytics } from "helpers/analytics";
-
-export const SafariPopup = (): JSX.Element => {
-  const [hasDisgardedSafariWarning, setHasDisgardedSafariWarning] = useSessionStorage(
-    "hasDisgardedSafariWarning",
-    false
-  );
-
-  const isClient = useIsClient();
-  const isSafari = useMemo<boolean>(() => {
-    if (isClient) {
-      const parser = new UAParser();
-      return parser.getBrowser().name === "Safari" || parser.getOS().name === "iOS";
-    }
-    return false;
-  }, [isClient]);
-
-  return (
-    <Popup isVisible={isSafari && !hasDisgardedSafariWarning}>
-      <h1 className="text-2xl">Hi, you are using Safari!</h1>
-      <p className="max-w-lg text-center">
-        In most cases this wouldn&rsquo;t be a problem but our website is—for some obscure
-        reason—performing terribly on Safari (WebKit). Because of that, we have decided to display
-        this message instead of letting you have a slow and painful experience. We are looking into
-        the problem, and are hoping to fix this soon.
-      </p>
-      <p>In the meanwhile, if you are using an iPhone/iPad, please try using another device.</p>
-      <p>If you are on macOS, please use another browser such as Firefox or Chrome.</p>
-
-      <Button
-        text="Let me in regardless"
-        className="mt-8"
-        onClick={() => {
-          setHasDisgardedSafariWarning(true);
-          sendAnalytics("Safari", "Disgard warning");
-        }}
-      />
-    </Popup>
-  );
-};
--- a/src/components/Panels/SettingsPopup.tsx
+++ b/src/components/Panels/SettingsPopup.tsx
@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { ButtonGroup } from "components/Inputs/ButtonGroup";
@ -34,12 +34,8 @@ export const SettingsPopup = (): JSX.Element => {

  const router = useRouter();

-  const currencyOptions = useMemo(
-    () =>
-      filterHasAttributes(currencies, ["attributes"] as const).map(
+  const currencyOptions = filterHasAttributes(currencies, ["attributes"] as const).map(
    (currentCurrency) => currentCurrency.attributes.code
-      ),
-    [currencies]
  );

  const [currencySelect, setCurrencySelect] = useState<number>(-1);
--- a/src/components/PostPage.tsx
+++ b/src/components/PostPage.tsx
@ -1,4 +1,4 @@
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback } from "react";
 import { AppLayout, AppLayoutRequired } from "./AppLayout";
 import { Chip } from "./Chip";
 import { HorizontalLine } from "./HorizontalLine";
@ -59,19 +59,13 @@ export const PostPage = ({
    ),
  });

-  const { thumbnail, body, title, excerpt } = useMemo(
-    () => ({
-      thumbnail:
-        selectedTranslation?.thumbnail?.data?.attributes ?? post.thumbnail?.data?.attributes,
-      body: selectedTranslation?.body ?? "",
-      title: selectedTranslation?.title ?? prettySlug(post.slug),
-      excerpt: selectedTranslation?.excerpt ?? "",
-    }),
-    [post.slug, post.thumbnail, selectedTranslation]
-  );
+  const thumbnail =
+    selectedTranslation?.thumbnail?.data?.attributes ?? post.thumbnail?.data?.attributes;
+  const body = selectedTranslation?.body ?? "";
+  const title = selectedTranslation?.title ?? prettySlug(post.slug);
+  const excerpt = selectedTranslation?.excerpt ?? "";

-  const subPanel = useMemo(
-    () =>
+  const subPanel =
    returnHref || returnTitle || displayCredits || displayToc ? (
      <SubPanel>
        {returnHref && returnTitle && (
@ -113,22 +107,9 @@ export const PostPage = ({

        {displayToc && <TableOfContents text={body} title={title} horizontalLine />}
      </SubPanel>
-      ) : undefined,
-    [
-      body,
-      displayCredits,
-      displayToc,
-      langui,
-      post.authors,
-      returnHref,
-      returnTitle,
-      selectedTranslation,
-      title,
-    ]
-  );
+    ) : undefined;

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel>
      {returnHref && returnTitle && (
        <ReturnButton
@ -176,23 +157,6 @@ export const PostPage = ({

      {appendBody}
    </ContentPanel>
-    ),
-    [
-      LanguageSwitcher,
-      appendBody,
-      body,
-      displayLanguageSwitcher,
-      displayThumbnailHeader,
-      displayTitle,
-      excerpt,
-      languageSwitcherProps,
-      post.categories,
-      prependBody,
-      returnHref,
-      returnTitle,
-      thumbnail,
-      title,
-    ]
  );

  return <AppLayout {...otherProps} contentPanel={contentPanel} subPanel={subPanel} />;
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { useRouter } from "next/router";
 import { Chip } from "./Chip";
 import { Ico, Icon } from "./Ico";
@ -75,8 +75,7 @@ export const PreviewCard = ({
  const isHoverable = useDeviceSupportsHover();
  const router = useRouter();

-  const metadataJSX = useMemo(
-    () => (
+  const metadataJSX = (
    <>
      {metadata && (metadata.releaseDate || metadata.price) && (
        <div className="flex w-full flex-row flex-wrap gap-x-3">
@ -107,8 +106,6 @@ export const PreviewCard = ({
        </div>
      )}
    </>
-    ),
-    [currencies, currency, metadata, router.locale]
  );

  return (
--- a/src/components/SmartList.tsx
+++ b/src/components/SmartList.tsx
@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import naturalCompare from "string-natural-compare";
 import { Chip } from "./Chip";
@ -87,17 +87,11 @@ export const SmartList = <T,>({
    return items;
  }, [items, searchingBy, searchingCaseInsensitive, searchingTerm]);

-  const filteredItems = useMemo(() => {
-    const filteredBySearch = searchFilter();
-    return filteredBySearch.filter(filteringFunction);
-  }, [filteringFunction, searchFilter]);
+  const filteredItems = searchFilter().filter(filteringFunction);

-  const sortedItem = useMemo(
-    () => filteredItems.sort(sortingFunction),
-    [filteredItems, sortingFunction]
-  );
+  const sortedItem = filteredItems.sort(sortingFunction);

-  const groups = useMemo(() => {
+  const groups = (() => {
    const memo: Group<T>[] = [];

    sortedItem.forEach((item) => {
@ -116,9 +110,9 @@ export const SmartList = <T,>({
      });
    });
    return memo.sort(groupSortingFunction);
-  }, [groupCountingFunction, groupSortingFunction, groupingFunction, sortedItem]);
+  })();

-  const pages = useMemo(() => {
+  const pages = (() => {
    const memo: Group<T>[][] = [];
    let currentPage: Group<T>[] = [];
    let remainingSlots = paginationItemPerPage;
@ -162,7 +156,7 @@ export const SmartList = <T,>({
    }

    return memo;
-  }, [groups, paginationItemPerPage]);
+  })();

  useHotkeys("left", () => setPage((current) => current - 1), { enabled: page > 0 });
  useHotkeys("right", () => setPage((current) => current + 1), {
--- a/src/contexts/settings.ts
+++ b/src/contexts/settings.ts
@ -84,6 +84,7 @@ export const useSettings = (): void => {
  useEffect(() => {
    if (preferredLanguages.length === 0) {
      if (isDefinedAndNotEmpty(router.locale) && router.locales) {
+        console.log(router.locale, getDefaultPreferredLanguages(router.locale, router.locales));
        setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
      }
    } else if (router.locale !== preferredLanguages[0]) {
--- a/src/contexts/webkitFixes.ts
+++ b/src/contexts/webkitFixes.ts
@ -0,0 +1,18 @@
+import { useLayoutEffect } from "react";
+import { isDefined } from "helpers/others";
+import { useIsWebkit } from "hooks/useIsWebkit";
+
+export const useWebkitFixes = (): void => {
+  const isWebkit = useIsWebkit();
+
+  useLayoutEffect(() => {
+    const next = document.getElementById("__next");
+    if (isDefined(next)) {
+      if (isWebkit) {
+        next.classList.add("webkit-fixes");
+      } else {
+        next.classList.remove("webkit-fixes");
+      }
+    }
+  }, [isWebkit]);
+};
--- a/src/hooks/useFullscreen.ts
+++ b/src/hooks/useFullscreen.ts
@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useIsClient } from "usehooks-ts";
 import { isDefined } from "helpers/others";

@ -13,7 +13,7 @@ export const useFullscreen = (
  const [isFullscreen, setIsFullscreen] = useState(false);
  const isClient = useIsClient();

-  const elem = useMemo(() => (isClient ? document.querySelector(`#${id}`) : null), [id, isClient]);
+  const elem = isClient ? document.querySelector(`#${id}`) : null;

  const requestFullscreen = useCallback(() => elem?.requestFullscreen(), [elem]);
  const exitFullscreen = useCallback(
--- a/src/hooks/useIntersectionList.ts
+++ b/src/hooks/useIntersectionList.ts
@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { throttle } from "throttle-debounce";
 import { useIsClient } from "usehooks-ts";
 import { useOnScroll } from "./useOnScroll";
@ -10,10 +10,7 @@ export const useIntersectionList = (ids: string[]): number => {

  const isClient = useIsClient();

-  const contentPanel = useMemo(
-    () => (isClient ? document.getElementById(Ids.ContentPanel) : null),
-    [isClient]
-  );
+  const contentPanel = isClient ? document.getElementById(Ids.ContentPanel) : null;

  const refreshCurrentIntersection = useCallback(
    (scroll: number) => {
--- a/src/hooks/useIsWebkit.ts
+++ b/src/hooks/useIsWebkit.ts
@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import UAParser from "ua-parser-js";
+import { useIsClient } from "usehooks-ts";
+
+export const useIsWebkit = (): boolean => {
+  const isClient = useIsClient();
+  return useMemo<boolean>(() => {
+    if (isClient) {
+      const parser = new UAParser();
+      return parser.getBrowser().name === "Safari" || parser.getOS().name === "iOS";
+    }
+    return false;
+  }, [isClient]);
+};
--- a/src/hooks/useOnScroll.ts
+++ b/src/hooks/useOnScroll.ts
@ -1,10 +1,10 @@
-import { useMemo, useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useIsClient } from "usehooks-ts";
 import { Ids } from "types/ids";

 export const useOnScroll = (id: Ids, onScroll: (scroll: number) => void): void => {
  const isClient = useIsClient();
-  const elem = useMemo(() => (isClient ? document.querySelector(`#${id}`) : null), [id, isClient]);
+  const elem = isClient ? document.querySelector(`#${id}`) : null;
  const listener = useCallback(() => {
    if (elem?.scrollTop) {
      onScroll(elem.scrollTop);
--- a/src/hooks/useReaderSettings.ts
+++ b/src/hooks/useReaderSettings.ts
@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
+import { Dispatch, SetStateAction, useCallback } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { ImageQuality } from "helpers/img";

@ -94,13 +94,8 @@ export const useReaderSettings = (): {
    setTeint,
  ]);

-  const filterSettings = useMemo(
-    () => ({ bookFold, lighting, paperTexture, teint, dropShadow }),
-    [bookFold, dropShadow, lighting, paperTexture, teint]
-  );
-
  return {
-    filterSettings,
+    filterSettings: { bookFold, lighting, paperTexture, teint, dropShadow },
    isSidePagesEnabled,
    pageQuality,
    toggleBookFold,
--- a/src/hooks/useScrollIntoView.ts
+++ b/src/hooks/useScrollIntoView.ts
@ -3,17 +3,20 @@ import { useEffect, useState } from "react";
 import { useCounter } from "usehooks-ts";
 import { isDefined } from "helpers/others";

+const NUM_RETRIES = 10;
+
 export const useScrollIntoView = (): void => {
  const router = useRouter();
  const { count, increment } = useCounter(0);
  const [hasReachedElem, setHasReachedElem] = useState(false);
  useEffect(() => {
+    if (count < NUM_RETRIES)
      if (!hasReachedElem) {
        const indexHash = router.asPath.indexOf("#");
        if (indexHash > 0) {
          const hash = router.asPath.slice(indexHash + 1);
+          if (hash !== "") {
            const element = document.getElementById(hash);
-        console.log(element);
            if (isDefined(element)) {
              console.log(`[useScrollIntoView] ${hash} found`);
              element.scrollIntoView();
@ -22,11 +25,12 @@ export const useScrollIntoView = (): void => {
              console.log(`[useScrollIntoView] ${hash} not found`);
              setTimeout(() => {
                increment();
-          }, 100);
+              }, 200);
            }
          }
        }
-  }, [increment, router.asPath, count, hasReachedElem, setHasReachedElem]);
+      }
+  }, [router.asPath, hasReachedElem, setHasReachedElem, increment, count]);

  useEffect(() => setHasReachedElem(false), [router.asPath]);
 };
--- a/src/hooks/useSmartLanguage.ts
+++ b/src/hooks/useSmartLanguage.ts
@ -36,7 +36,7 @@ export const useSmartLanguage = <T>({
    setSelectedTranslationIndex(getPreferredLanguage(preferredLanguages, availableLocales));
  }, [preferredLanguages, availableLocales, router.locale]);

-  const selectedTranslation = useMemo(() => {
+  const selectedTranslation = (() => {
    if (isDefined(selectedTranslationIndex)) {
      const item = items[selectedTranslationIndex];
      if (isDefined(item)) {
@ -44,7 +44,7 @@ export const useSmartLanguage = <T>({
      }
    }
    return undefined;
-  }, [items, selectedTranslationIndex, transform]);
+  })();

  const languageSwitcherProps = {
    languages: languages,
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -22,12 +22,14 @@ import { LightBoxProvider } from "contexts/LightBoxProvider";
 import { SettingsPopup } from "components/Panels/SettingsPopup";
 import { useSettings } from "contexts/settings";
 import { useContainerQueries } from "contexts/containerQueries";
+import { useWebkitFixes } from "contexts/webkitFixes";

 const AccordsLibraryApp = (props: AppProps): JSX.Element => {
  useLocalData();
  useAppLayout();
  useSettings();
  useContainerQueries();
+  useWebkitFixes();

  return (
    <>
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@ -1,5 +1,4 @@
 import { GetStaticProps } from "next";
-import { useMemo } from "react";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
@ -20,8 +19,7 @@ interface Props extends AppLayoutRequired {}

 const Archives = (props: Props): JSX.Element => {
  const langui = useAtomGetter(atoms.localData.langui);
-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <PanelHeader
        icon={Icon.Inventory}
@ -31,9 +29,8 @@ const Archives = (props: Props): JSX.Element => {
      <HorizontalLine />
      <NavOption title={"Videos"} url="/archives/videos/" border />
    </SubPanel>
-    ),
-    [langui]
  );
+
  return <AppLayout subPanel={subPanel} {...props} />;
 };
 export default Archives;
--- a/src/pages/archives/videos/c/[uid].tsx
+++ b/src/pages/archives/videos/c/[uid].tsx
@ -1,5 +1,5 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useBoolean } from "usehooks-ts";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Switch } from "components/Inputs/Switch";
@ -51,8 +51,7 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {

  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <ReturnButton
        href="/archives/videos/"
@ -82,12 +81,9 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
        </WithLabel>
      )}
    </SubPanel>
-    ),
-    [hoverable, keepInfoVisible, langui, searchName, toggleKeepInfoVisible]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <SmartList
        items={filterHasAttributes(channel?.videos?.data, ["id", "attributes"] as const)}
@ -123,8 +119,6 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
        searchingBy={(item) => item.attributes.title}
      />
    </ContentPanel>
-    ),
-    [channel?.title, channel?.videos?.data, isContentPanelAtLeast4xl, keepInfoVisible, searchName]
  );

  return <AppLayout subPanel={subPanel} contentPanel={contentPanel} {...otherProps} />;
--- a/src/pages/archives/videos/index.tsx
+++ b/src/pages/archives/videos/index.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useBoolean } from "usehooks-ts";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { SmartList } from "components/SmartList";
@ -52,8 +52,7 @@ const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {

  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <ReturnButton
        href="/archives/"
@ -79,12 +78,9 @@ const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
        </WithLabel>
      )}
    </SubPanel>
-    ),
-    [hoverable, keepInfoVisible, langui, searchName, toggleKeepInfoVisible]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <SmartList
        items={filterHasAttributes(videos, ["id", "attributes"] as const)}
@ -119,8 +115,6 @@ const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
        searchingBy={(item) => item.attributes.title}
      />
    </ContentPanel>
-    ),
-    [isContentPanelAtLeast4xl, keepInfoVisible, searchName, videos]
  );
  return <AppLayout subPanel={subPanel} contentPanel={contentPanel} {...otherProps} />;
 };
--- a/src/pages/archives/videos/v/[uid].tsx
+++ b/src/pages/archives/videos/v/[uid].tsx
@ -1,5 +1,4 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { useMemo } from "react";
 import { useRouter } from "next/router";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { HorizontalLine } from "components/HorizontalLine";
@ -34,8 +33,7 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
  const langui = useAtomGetter(atoms.localData.langui);
  const router = useRouter();

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <ReturnButton
        href="/archives/videos/"
@ -49,12 +47,9 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
      <NavOption title={langui.channel} url="#channel" border />
      <NavOption title={langui.description} url="#description" border />
    </SubPanel>
-    ),
-    [langui]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <ReturnButton
        href="/library/"
@ -133,21 +128,6 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
        </InsetBox>
      </div>
    </ContentPanel>
-    ),
-    [
-      isContentPanelAtLeast4xl,
-      langui,
-      router.locale,
-      video.channel?.data?.attributes,
-      video.description,
-      video.gone,
-      video.likes,
-      video.published_date,
-      video.source,
-      video.title,
-      video.uid,
-      video.views,
-    ]
  );

  return <AppLayout subPanel={subPanel} contentPanel={contentPanel} {...otherProps} />;
--- a/src/pages/chronicles/[slug]/index.tsx
+++ b/src/pages/chronicles/[slug]/index.tsx
@ -67,8 +67,7 @@ const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element =
      ),
    });

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel>
      <ReturnButton
        displayOnlyOn={"1ColumnLayout"}
@ -85,9 +84,7 @@ const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element =
            <LanguageSwitcher {...languageSwitcherProps} />
          )}

-            {isDefined(selectedTranslation.body) && (
-              <Markdawn text={selectedTranslation.body.body} />
-            )}
+          {isDefined(selectedTranslation.body) && <Markdawn text={selectedTranslation.body.body} />}
        </>
      ) : (
        <>
@ -119,35 +116,16 @@ const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element =
        </>
      )}
    </ContentPanel>
-    ),
-    [
-      selectedTranslation,
-      languageSwitcherProps,
-      LanguageSwitcher,
-      selectedContentTranslation,
-      ContentLanguageSwitcherProps,
-      ContentLanguageSwitcher,
-      primaryContent?.categories,
-      primaryContent?.type,
-      primaryContent?.thumbnail?.data?.attributes,
-      langui,
-    ]
  );

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
-        <ReturnButton
-          displayOnlyOn={"3ColumnsLayout"}
-          href="/chronicles"
-          title={langui.chronicles}
-        />
+      <ReturnButton displayOnlyOn={"3ColumnsLayout"} href="/chronicles" title={langui.chronicles} />

      <HorizontalLine />

      <div className="grid gap-16">
-          {filterHasAttributes(chapters, ["attributes.chronicles", "id"] as const).map(
-            (chapter) => (
+        {filterHasAttributes(chapters, ["attributes.chronicles", "id"] as const).map((chapter) => (
          <TranslatedChroniclesList
            key={chapter.id}
            chronicles={chapter.attributes.chronicles.data}
@ -160,12 +138,9 @@ const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element =
            fallback={{ title: prettySlug(chapter.attributes.slug) }}
            currentSlug={chronicle.slug}
          />
-            )
-          )}
+        ))}
      </div>
    </SubPanel>
-    ),
-    [chapters, chronicle.slug, langui]
  );

  return (
--- a/src/pages/chronicles/index.tsx
+++ b/src/pages/chronicles/index.tsx
@ -1,5 +1,4 @@
 import { GetStaticProps } from "next";
-import { useMemo } from "react";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Containers/SubPanel";
@ -26,8 +25,7 @@ interface Props extends AppLayoutRequired {

 const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
  const langui = useAtomGetter(atoms.localData.langui);
-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <PanelHeader
        icon={Icon.WatchLater}
@ -38,8 +36,7 @@ const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
      <HorizontalLine />

      <div className="grid gap-16">
-          {filterHasAttributes(chapters, ["attributes.chronicles", "id"] as const).map(
-            (chapter) => (
+        {filterHasAttributes(chapters, ["attributes.chronicles", "id"] as const).map((chapter) => (
          <TranslatedChroniclesList
            key={chapter.id}
            chronicles={chapter.attributes.chronicles.data}
@ -51,12 +48,9 @@ const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
            }))}
            fallback={{ title: prettySlug(chapter.attributes.slug) }}
          />
-            )
-          )}
+        ))}
      </div>
    </SubPanel>
-    ),
-    [chapters, langui]
  );

  return <AppLayout subPanel={subPanel} {...otherProps} />;
--- a/src/pages/contents/[slug].tsx
+++ b/src/pages/contents/[slug].tsx
@ -1,5 +1,5 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback } from "react";
 import naturalCompare from "string-natural-compare";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Chip } from "components/Chip";
@ -62,22 +62,16 @@ const Content = ({ content, ...otherProps }: Props): JSX.Element => {

  useScrollTopOnChange(Ids.ContentPanel, [selectedTranslation]);

-  const { previousContent, nextContent } = useMemo(
-    () => ({
-      previousContent:
+  const previousContent =
    content.folder?.data?.attributes?.contents && content.folder.data.attributes.sequence
      ? getPreviousContent(content.folder.data.attributes.contents.data, content.slug)
-          : undefined,
-      nextContent:
+      : undefined;
+  const nextContent =
    content.folder?.data?.attributes?.contents && content.folder.data.attributes.sequence
      ? getNextContent(content.folder.data.attributes.contents.data, content.slug)
-          : undefined,
-    }),
-    [content.folder, content.slug]
-  );
+      : undefined;

-  const returnButtonProps = useMemo(
-    () => ({
+  const returnButtonProps = {
    href: content.folder?.data?.attributes
      ? `/contents/folder/${content.folder.data.attributes.slug}`
      : "/contents",
@ -94,12 +88,9 @@ const Content = ({ content, ...otherProps }: Props): JSX.Element => {
        : langui.contents,
    },
    langui,
-    }),
-    [content.folder?.data?.attributes, langui]
-  );
+  };

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <TranslatedReturnButton {...returnButtonProps} displayOnlyOn="3ColumnsLayout" />

@ -226,9 +217,7 @@ const Content = ({ content, ...otherProps }: Props): JSX.Element => {
              ] as const).map((rangedContent) => {
                const libraryItem = rangedContent.attributes.library_item.data;
                return (
-                    <div
-                      key={libraryItem.attributes.slug}
-                      className={cIf(is1ColumnLayout, "w-3/4")}>
+                  <div key={libraryItem.attributes.slug} className={cIf(is1ColumnLayout, "w-3/4")}>
                    <PreviewCard
                      href={`/library/${libraryItem.attributes.slug}`}
                      title={libraryItem.attributes.title}
@ -265,19 +254,9 @@ const Content = ({ content, ...otherProps }: Props): JSX.Element => {
        </>
      )}
    </SubPanel>
-    ),
-    [
-      content.ranged_contents?.data,
-      languages,
-      langui,
-      returnButtonProps,
-      selectedTranslation,
-      is1ColumnLayout,
-    ]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel>
      <TranslatedReturnButton
        {...returnButtonProps}
@ -382,24 +361,6 @@ const Content = ({ content, ...otherProps }: Props): JSX.Element => {
        )}
      </div>
    </ContentPanel>
-    ),
-    [
-      LanguageSwitcher,
-      content.categories,
-      content.thumbnail?.data?.attributes,
-      content.type,
-      isContentPanelAtLeast2xl,
-      languageSwitcherProps,
-      langui,
-      nextContent?.attributes,
-      previousContent?.attributes,
-      returnButtonProps,
-      selectedTranslation?.description,
-      selectedTranslation?.pre_title,
-      selectedTranslation?.subtitle,
-      selectedTranslation?.text_set?.text,
-      selectedTranslation?.title,
-    ]
  );

  return <AppLayout contentPanel={contentPanel} subPanel={subPanel} {...otherProps} />;
--- a/src/pages/contents/all.tsx
+++ b/src/pages/contents/all.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { useState, useMemo, useCallback } from "react";
+import { useState, useCallback } from "react";
 import { useBoolean } from "usehooks-ts";
 import naturalCompare from "string-natural-compare";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
@ -116,8 +116,7 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
    [searchName]
  );

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <PanelHeader
        icon={Icon.Workspaces}
@ -185,28 +184,9 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
        }}
      />
    </SubPanel>
-    ),
-    [
-      groupingMethod,
-      hoverable,
-      keepInfoVisible,
-      langui.always_show_info,
-      langui.category,
-      langui.contents,
-      langui.contents_description,
-      langui.group_by,
-      langui.reset_all_filters,
-      langui.search_title,
-      langui.switch_to_folder_view,
-      langui.type,
-      searchName,
-      setKeepInfoVisible,
-      toggleKeepInfoVisible,
-    ]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <SmartList
        items={filterHasAttributes(contents, ["attributes", "id"] as const)}
@ -264,15 +244,6 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
        paginationItemPerPage={50}
      />
    </ContentPanel>
-    ),
-    [
-      isContentPanelAtLeast4xl,
-      contents,
-      filteringFunction,
-      groupingFunction,
-      keepInfoVisible,
-      searchName,
-    ]
  );

  return (
--- a/src/pages/contents/folder/[slug].tsx
+++ b/src/pages/contents/folder/[slug].tsx
@ -1,5 +1,4 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { useMemo } from "react";
 import naturalCompare from "string-natural-compare";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
@ -37,8 +36,7 @@ const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Elemen
  const langui = useAtomGetter(atoms.localData.langui);
  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <PanelHeader
        icon={Icon.Workspaces}
@ -50,12 +48,9 @@ const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Elemen

      <Button href="/contents/all" text={langui.switch_to_grid_view} icon={Icon.Apps} />
    </SubPanel>
-    ),
-    [langui.contents, langui.contents_description, langui.switch_to_grid_view]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <div className="mb-10 grid grid-flow-col place-items-center justify-start gap-x-2">
        {folder.parent_folder?.data?.attributes && (
@ -171,16 +166,6 @@ const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Elemen
        <NoContentNorFolderMessage />
      )}
    </ContentPanel>
-    ),
-    [
-      folder.contents?.data,
-      folder.parent_folder?.data?.attributes,
-      folder.slug,
-      folder.subfolders?.data,
-      folder.titles,
-      isContentPanelAtLeast4xl,
-      langui,
-    ]
  );

  return (
--- a/src/pages/dev/checkup/contents.tsx
+++ b/src/pages/dev/checkup/contents.tsx
@ -1,5 +1,4 @@
 import { GetStaticProps } from "next";
-import { useMemo } from "react";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Chip } from "components/Chip";
 import { Button } from "components/Inputs/Button";
@ -23,10 +22,9 @@ interface Props extends AppLayoutRequired {
 }

 const CheckupContents = ({ contents, ...otherProps }: Props): JSX.Element => {
-  const testReport = useMemo(() => testingContent(contents), [contents]);
+  const testReport = testingContent(contents);

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      {<h2 className="text-2xl">{testReport.title}</h2>}

@ -71,8 +69,6 @@ const CheckupContents = ({ contents, ...otherProps }: Props): JSX.Element => {
          </div>
        ))}
    </ContentPanel>
-    ),
-    [testReport.lines, testReport.title]
  );

  return <AppLayout contentPanel={contentPanel} {...otherProps} />;
--- a/src/pages/dev/checkup/libraryitems.tsx
+++ b/src/pages/dev/checkup/libraryitems.tsx
@ -1,5 +1,4 @@
 import { GetStaticProps } from "next";
-import { useMemo } from "react";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Chip } from "components/Chip";
 import { Button } from "components/Inputs/Button";
@ -27,8 +26,7 @@ interface Props extends AppLayoutRequired {
 const CheckupLibraryItems = ({ libraryItems, ...otherProps }: Props): JSX.Element => {
  const testReport = testingLibraryItem(libraryItems);

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      {<h2 className="text-2xl">{testReport.title}</h2>}

@ -73,8 +71,6 @@ const CheckupLibraryItems = ({ libraryItems, ...otherProps }: Props): JSX.Elemen
          </div>
        ))}
    </ContentPanel>
-    ),
-    [testReport.lines, testReport.title]
  );

  return <AppLayout contentPanel={contentPanel} {...otherProps} />;
--- a/src/pages/dev/editor.tsx
+++ b/src/pages/dev/editor.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import TurndownService from "turndown";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Button } from "components/Inputs/Button";
@ -156,8 +156,7 @@ const Editor = (props: Props): JSX.Element => {
    [transformationWrapper]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <Popup isVisible={converterOpened} onCloseRequest={() => setConverterOpened(false)}>
        <div className="text-center">
@ -257,8 +256,8 @@ const Editor = (props: Props): JSX.Element => {
            <>
              <h3 className="text-lg">Transcripts</h3>
              <p>
-                  Use this to create dialogues and transcripts. Start by adding a container, then
-                  add transcript speech line within.
+                Use this to create dialogues and transcripts. Start by adding a container, then add
+                transcript speech line within.
              </p>
              <div className="grid gap-2">
                <ToolTip
@ -327,11 +326,7 @@ const Editor = (props: Props): JSX.Element => {
                    </p>
                  </>
                }>
-                  <Button
-                    onClick={() => wrap("IntraLink", {})}
-                    icon={Icon.Link}
-                    text={"Internal"}
-                  />
+                <Button onClick={() => wrap("IntraLink", {})} icon={Icon.Link} text={"Internal"} />
              </ToolTip>
              <ToolTip
                placement="right"
@ -398,8 +393,6 @@ const Editor = (props: Props): JSX.Element => {
        <TableOfContents text={markdown} />
      </div>
    </ContentPanel>
-    ),
-    [appendDoc, converterOpened, handleInput, insert, markdown, preline, toggleWrap, wrap]
  );

  return <AppLayout contentPanel={contentPanel} {...props} />;
--- a/src/pages/dev/transcript.tsx
+++ b/src/pages/dev/transcript.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Button } from "components/Inputs/Button";
 import { ButtonGroup } from "components/Inputs/ButtonGroup";
@ -359,8 +359,7 @@ const Transcript = (props: Props): JSX.Element => {
    [updateDisplayedText]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full} className="overflow-hidden !pr-0 !pt-4">
      <div className="grid grid-flow-col grid-cols-[1fr_5rem]">
        <textarea
@ -522,20 +521,6 @@ const Transcript = (props: Props): JSX.Element => {
        </ToolTip>
      </div>
    </ContentPanel>
-    ),
-    [
-      convertFullWidth,
-      convertPunctuation,
-      fontSize,
-      insert,
-      lineIndex,
-      text,
-      toggleDakuten,
-      toggleSmallForm,
-      updateDisplayedText,
-      updateLineIndex,
-      xOffset,
-    ]
  );

  return <AppLayout contentPanel={contentPanel} {...props} contentPanelScroolbar={false} />;
--- a/src/pages/library/[slug]/index.tsx
+++ b/src/pages/library/[slug]/index.tsx
@ -1,4 +1,4 @@
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback } from "react";
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import { useBoolean } from "usehooks-ts";
@ -88,23 +88,15 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
  useScrollTopOnChange(Ids.ContentPanel, [item]);
  const currentIntersection = useIntersectionList(intersectionIds);

-  const isVariantSet = useMemo(
-    () =>
+  const isVariantSet =
    item.metadata?.[0]?.__typename === "ComponentMetadataGroup" &&
-      item.metadata[0].subtype?.data?.attributes?.slug === "variant-set",
-    [item.metadata]
-  );
+    item.metadata[0].subtype?.data?.attributes?.slug === "variant-set";

-  const displayOpenScans = useMemo(
-    () =>
-      item.contents?.data.some(
+  const displayOpenScans = item.contents?.data.some(
    (content) => content.attributes?.scan_set && content.attributes.scan_set.length > 0
-      ),
-    [item.contents?.data]
  );

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <ReturnButton href="/library/" title={langui.library} displayOnlyOn="3ColumnsLayout" />

@ -153,12 +145,9 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
        )}
      </div>
    </SubPanel>
-    ),
-    [currentIntersection, isVariantSet, item.contents, item.gallery, item.subitems, langui]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <ReturnButton
        href="/library/"
@ -203,9 +192,7 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
            )}
            <div className="grid place-items-center text-center">
              <h1 className="text-3xl">{item.title}</h1>
-                {isDefinedAndNotEmpty(item.subtitle) && (
-                  <h2 className="text-2xl">{item.subtitle}</h2>
-                )}
+              {isDefinedAndNotEmpty(item.subtitle) && <h2 className="text-2xl">{item.subtitle}</h2>}
            </div>

            {!isUntangibleGroupItem(item.metadata?.[0]) && isDefinedAndNotEmpty(itemId) && (
@ -562,37 +549,6 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
        )}
      </div>
    </ContentPanel>
-    ),
-    [
-      langui,
-      isContentPanelAtLeast3xl,
-      item.thumbnail?.data?.attributes,
-      item.subitem_of?.data,
-      item.title,
-      item.subtitle,
-      item.metadata,
-      item.descriptions,
-      item.urls,
-      item.gallery,
-      item.release_date,
-      item.price,
-      item.categories,
-      item.size,
-      item.subitems,
-      item.contents,
-      item.slug,
-      itemId,
-      router.locale,
-      currencies,
-      currency,
-      isContentPanelAtLeastSm,
-      isVariantSet,
-      hoverable,
-      toggleKeepInfoVisible,
-      keepInfoVisible,
-      displayOpenScans,
-      showLightBox,
-    ]
  );

  return <AppLayout contentPanel={contentPanel} subPanel={subPanel} {...otherProps} />;
--- a/src/pages/library/[slug]/reader.tsx
+++ b/src/pages/library/[slug]/reader.tsx
@ -1,5 +1,5 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import Slider from "rc-slider";
 import { useRouter } from "next/router";
@ -44,6 +44,7 @@ import { useFullscreen } from "hooks/useFullscreen";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 import { FilterSettings, useReaderSettings } from "hooks/useReaderSettings";
+import { useIsWebkit } from "hooks/useIsWebkit";

 const CUSTOM_DARK_DROPSHADOW = `
  drop-shadow(0 0    0.5em rgb(var(--theme-color-shade) / 30%))
@ -112,19 +113,14 @@ const LibrarySlug = ({
    is1ColumnLayout ? "single" : "double"
  );
  const router = useRouter();
+  const isWebkit = useIsWebkit();

  const { isFullscreen, toggleFullscreen, requestFullscreen } = useFullscreen(Ids.ContentPanel);

-  const effectiveDisplayMode = useMemo(
-    () =>
-      currentPageIndex === 0 || currentPageIndex === pages.length - 1 ? "single" : displayMode,
-    [currentPageIndex, displayMode, pages.length]
-  );
+  const effectiveDisplayMode =
+    currentPageIndex === 0 || currentPageIndex === pages.length - 1 ? "single" : displayMode;

-  const ajustedSidepagesTotalWidth = useMemo(
-    () => pages.length * SIDEPAGES_PAGE_WIDTH * (120 / pageWidth),
-    [pageWidth, pages.length]
-  );
+  const ajustedSidepagesTotalWidth = pages.length * SIDEPAGES_PAGE_WIDTH * (120 / pageWidth);

  const changeCurrentPageIndex = useCallback(
    (callbackFn: (current: number) => number) => {
@ -185,61 +181,39 @@ const LibrarySlug = ({
    handlePageNavigation,
  ]);

-  const firstPage = useMemo(
-    () =>
+  const firstPage =
    pages[
      effectiveDisplayMode === "double" && currentPageIndex % 2 === 0
        ? currentPageIndex - 1
        : currentPageIndex
-      ],
-    [currentPageIndex, effectiveDisplayMode, pages]
-  );
-  const secondPage = useMemo(
-    () =>
+    ];
+
+  const secondPage =
    pages[
      effectiveDisplayMode === "double" && currentPageIndex % 2 === 0
        ? currentPageIndex
        : currentPageIndex + 1
-      ],
-    [currentPageIndex, effectiveDisplayMode, pages]
-  );
+    ];

-  const leftSidePagesCount = useMemo(
-    () =>
-      pageOrder === PageOrder.LeftToRight ? currentPageIndex : pages.length - 1 - currentPageIndex,
-    [currentPageIndex, pageOrder, pages.length]
-  );
+  const leftSidePagesCount =
+    pageOrder === PageOrder.LeftToRight ? currentPageIndex : pages.length - 1 - currentPageIndex;

-  const rightSidePagesCount = useMemo(
-    () =>
-      pageOrder === PageOrder.LeftToRight ? pages.length - 1 - currentPageIndex : currentPageIndex,
-    [currentPageIndex, pageOrder, pages.length]
-  );
+  const rightSidePagesCount =
+    pageOrder === PageOrder.LeftToRight ? pages.length - 1 - currentPageIndex : currentPageIndex;

-  const leftSidePagesWidth = useMemo(
-    () =>
-      `${
+  const leftSidePagesWidth = `${
    pageOrder === PageOrder.LeftToRight
      ? (currentPageIndex / pages.length) * ajustedSidepagesTotalWidth
-          : ajustedSidepagesTotalWidth -
-            (currentPageIndex / pages.length) * ajustedSidepagesTotalWidth
-      }vmin`,
-    [ajustedSidepagesTotalWidth, currentPageIndex, pageOrder, pages.length]
-  );
+      : ajustedSidepagesTotalWidth - (currentPageIndex / pages.length) * ajustedSidepagesTotalWidth
+  }vmin`;

-  const rightSidePagesWidth = useMemo(
-    () =>
-      `${
+  const rightSidePagesWidth = `${
    pageOrder === PageOrder.LeftToRight
-          ? ajustedSidepagesTotalWidth -
-            (currentPageIndex / pages.length) * ajustedSidepagesTotalWidth
+      ? ajustedSidepagesTotalWidth - (currentPageIndex / pages.length) * ajustedSidepagesTotalWidth
      : (currentPageIndex / pages.length) * ajustedSidepagesTotalWidth
-      }vmin`,
-    [ajustedSidepagesTotalWidth, currentPageIndex, pageOrder, pages.length]
-  );
+  }vmin`;

-  const leftSideClipPath = useMemo(
-    () => `polygon(
+  const leftSideClipPath = `polygon(
    ${
      isSidePagesEnabled
        ? `
@ -265,12 +239,9 @@ const LibrarySlug = ({
         : "101% 0%, 101% 100%,"
     }
     70%   100%
-    )`,
-    [filterSettings.bookFold, isSidePagesEnabled, leftSidePagesWidth]
-  );
+    )`;

-  const rightSideClipPath = useMemo(
-    () => `polygon(
+  const rightSideClipPath = `polygon(
      ${
        isSidePagesEnabled
          ? `calc(100% - ${rightSidePagesWidth}) 0%,
@ -295,17 +266,11 @@ const LibrarySlug = ({
          : "-1% 100%, -1% 0%,"
      }
      30%     0%
-      )`,
-    [filterSettings.bookFold, isSidePagesEnabled, rightSidePagesWidth]
-  );
+      )`;

-  const pageHeight = useMemo(
-    () => `calc(100vh - ${is1ColumnLayout ? 5 : 4}rem - 3rem)`,
-    [is1ColumnLayout]
-  );
+  const pageHeight = `calc(100vh - ${is1ColumnLayout ? 5 : 4}rem - 3rem)`;

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <ReturnButton title={langui.item} href={`/library/${itemSlug}`} />

@ -326,9 +291,11 @@ const LibrarySlug = ({
          <Switch value={isSidePagesEnabled} onClick={toggleIsSidePagesEnabled} />
        </WithLabel>

+        {!isWebkit && (
          <WithLabel label={langui.shadow}>
            <Switch value={filterSettings.dropShadow} onClick={toggleDropShadow} />
          </WithLabel>
+        )}
      </div>

      <div className="mt-4 grid">
@ -398,44 +365,9 @@ const LibrarySlug = ({
        }}
      />
    </SubPanel>
-    ),
-    [
-      langui.item,
-      langui.paper_texture,
-      langui.book_fold,
-      langui.lighting,
-      langui.side_pages,
-      langui.shadow,
-      langui.night_reader,
-      langui.reading_layout,
-      langui.single_page_view,
-      langui.double_page_view,
-      langui.quality,
-      langui.reset_all_options,
-      itemSlug,
-      filterSettings.paperTexture,
-      filterSettings.bookFold,
-      filterSettings.lighting,
-      filterSettings.dropShadow,
-      filterSettings.teint,
-      togglePaperTexture,
-      toggleBookFold,
-      toggleLighting,
-      isSidePagesEnabled,
-      toggleIsSidePagesEnabled,
-      toggleDropShadow,
-      displayMode,
-      pageQuality,
-      setTeint,
-      changeDisplayMode,
-      setPageQuality,
-      resetReaderSettings,
-      is1ColumnLayout,
-    ]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full} className="grid place-content-center !p-0">
      <div className={cJoin("mb-12 grid", cIf(is1ColumnLayout, "!p-0", "!p-8"))}>
        <TransformWrapper
@ -451,11 +383,12 @@ const LibrarySlug = ({
              gridAutoFlow: "column",
              display: "grid",
              placeContent: "center",
-                filter: filterSettings.dropShadow
-                  ? isDarkMode
+              filter:
+                !filterSettings.dropShadow || isWebkit
+                  ? undefined
+                  : isDarkMode
                  ? CUSTOM_DARK_DROPSHADOW
-                    : CUSTOM_LIGHT_DROPSHADOW
-                  : undefined,
+                  : CUSTOM_LIGHT_DROPSHADOW,
            }}>
            {effectiveDisplayMode === "single" ? (
              <div
@ -625,36 +558,6 @@ const LibrarySlug = ({
        </div>
      </div>
    </ContentPanel>
-    ),
-    [
-      is1ColumnLayout,
-      currentZoom,
-      filterSettings,
-      isDarkMode,
-      pageHeight,
-      effectiveDisplayMode,
-      firstPage,
-      pageQuality,
-      bookType,
-      leftSideClipPath,
-      isSidePagesEnabled,
-      leftSidePagesWidth,
-      leftSidePagesCount,
-      pageOrder,
-      secondPage,
-      rightSideClipPath,
-      rightSidePagesWidth,
-      rightSidePagesCount,
-      isGalleryMode,
-      currentPageIndex,
-      pages.length,
-      isFullscreen,
-      toggleFullscreen,
-      item.contents?.data,
-      item.slug,
-      handlePageNavigation,
-      changeCurrentPageIndex,
-    ]
  );

  return (
@ -798,9 +701,9 @@ interface PageFiltersProps {

 const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
  const isDarkMode = useAtomGetter(atoms.settings.darkMode);
-  const commonCss = useMemo(
-    () => cJoin("absolute inset-0", cIf(page === "right", "[background-position-x:-100%]")),
-    [page]
+  const commonCss = cJoin(
+    "absolute inset-0",
+    cIf(page === "right", "[background-position-x:-100%]")
  );

  return (
@ -929,10 +832,7 @@ const ScanSet = ({ onClickOnImage, scanSet, id, title, content }: ScanSetProps):
    }, []),
  });

-  const pages = useMemo(
-    () => filterHasAttributes(selectedScan?.pages?.data, ["attributes"]),
-    [selectedScan]
-  );
+  const pages = filterHasAttributes(selectedScan?.pages?.data, ["attributes"]);

  return (
    <>
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { useState, useMemo, useCallback } from "react";
+import { useState, useCallback } from "react";
 import { useBoolean } from "usehooks-ts";
 import naturalCompare from "string-natural-compare";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
@ -222,8 +222,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
    [groupingMethod, langui]
  );

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <PanelHeader
        icon={Icon.LibraryBooks}
@ -387,31 +386,9 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
        }}
      />
    </SubPanel>
-    ),
-    [
-      filterUserStatus,
-      groupingMethod,
-      hoverable,
-      keepInfoVisible,
-      langui,
-      searchName,
-      setKeepInfoVisible,
-      setShowPrimaryItems,
-      setShowSecondaryItems,
-      setShowSubitems,
-      showPrimaryItems,
-      showSecondaryItems,
-      showSubitems,
-      sortingMethod,
-      toggleKeepInfoVisible,
-      toggleShowPrimaryItems,
-      toggleShowSecondaryItems,
-      toggleShowSubitems,
-    ]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <SmartList
        items={filterHasAttributes(items, ["id", "attributes"] as const)}
@ -461,16 +438,6 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
        paginationItemPerPage={25}
      />
    </ContentPanel>
-    ),
-    [
-      filteringFunction,
-      groupingFunction,
-      isContentPanelAtLeast4xl,
-      items,
-      keepInfoVisible,
-      searchName,
-      sortingFunction,
-    ]
  );

  return (
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useBoolean } from "usehooks-ts";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Switch } from "components/Inputs/Switch";
@ -58,8 +58,7 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
  } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
  const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <PanelHeader icon={Icon.Feed} title={langui.news} description={langui.news_description} />

@ -102,12 +101,9 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
        }}
      />
    </SubPanel>
-    ),
-    [hoverable, keepInfoVisible, langui, searchName, setKeepInfoVisible, toggleKeepInfoVisible]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <SmartList
        items={filterHasAttributes(posts, ["attributes", "id"] as const)}
@ -151,8 +147,6 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
        paginationItemPerPage={25}
      />
    </ContentPanel>
-    ),
-    [keepInfoVisible, posts, searchName, isContentPanelAtLeast4xl]
  );

  if (isTerminalMode) {
--- a/src/pages/wiki/[slug]/index.tsx
+++ b/src/pages/wiki/[slug]/index.tsx
@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
@ -49,17 +49,13 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
  });
  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <ReturnButton href={`/wiki`} title={langui.wiki} displayOnlyOn={"3ColumnsLayout"} />
    </SubPanel>
-    ),
-    [langui]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Large}>
      <ReturnButton
        href={`/wiki`}
@ -173,22 +169,6 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
        </>
      )}
    </ContentPanel>
-    ),
-    [
-      LanguageSwitcher,
-      is3ColumnsLayout,
-      languageSwitcherProps,
-      langui.categories,
-      langui.summary,
-      langui.tags,
-      langui.wiki,
-      page.categories?.data,
-      page.definitions,
-      page.tags?.data,
-      page.thumbnail?.data?.attributes,
-      selectedTranslation,
-      showLightBox,
-    ]
  );

  if (isTerminalMode) {
--- a/src/pages/wiki/chronology.tsx
+++ b/src/pages/wiki/chronology.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback } from "react";
 import { useRouter } from "next/router";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { InsetBox } from "components/Containers/InsetBox";
@ -46,18 +46,13 @@ interface Props extends AppLayoutRequired {

 const Chronology = ({ chronologyItems, chronologyEras, ...otherProps }: Props): JSX.Element => {
  const langui = useAtomGetter(atoms.localData.langui);
-  const ids = useMemo(
-    () =>
-      filterHasAttributes(chronologyEras, ["attributes"] as const).map(
+  const ids = filterHasAttributes(chronologyEras, ["attributes"] as const).map(
    (era) => era.attributes.slug
-      ),
-    [chronologyEras]
  );

  const currentIntersection = useIntersectionList(ids);

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <ReturnButton href="/wiki" title={langui.wiki} displayOnlyOn="3ColumnsLayout" />

@ -84,12 +79,9 @@ const Chronology = ({ chronologyItems, chronologyEras, ...otherProps }: Props):
        </Fragment>
      ))}
    </SubPanel>
-    ),
-    [chronologyEras, currentIntersection, langui]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel>
      <ReturnButton
        href="/wiki"
@ -118,8 +110,6 @@ const Chronology = ({ chronologyItems, chronologyEras, ...otherProps }: Props):
        />
      ))}
    </ContentPanel>
-    ),
-    [chronologyEras, chronologyItems, langui]
  );

  return <AppLayout contentPanel={contentPanel} subPanel={subPanel} {...otherProps} />;
@ -161,7 +151,7 @@ interface ChronologyEraProps {
 }

 const ChronologyEra = ({ id, title, description, chronologyItems }: ChronologyEraProps) => {
-  const yearGroups = useMemo(() => {
+  const yearGroups = (() => {
    const memo: Props["chronologyItems"][] = [];
    let currentYear = -Infinity;
    filterHasAttributes(chronologyItems, ["attributes"] as const).forEach((item) => {
@ -173,7 +163,7 @@ const ChronologyEra = ({ id, title, description, chronologyItems }: ChronologyEr
      }
    });
    return memo;
-  }, [chronologyItems]);
+  })();

  return (
    <div id={id}>
--- a/src/pages/wiki/index.tsx
+++ b/src/pages/wiki/index.tsx
@ -1,5 +1,5 @@
 import { GetStaticProps } from "next";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { useBoolean } from "usehooks-ts";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { NavOption } from "components/PanelComponents/NavOption";
@ -67,8 +67,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
    setValue: setKeepInfoVisible,
  } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);

-  const subPanel = useMemo(
-    () => (
+  const subPanel = (
    <SubPanel>
      <PanelHeader
        icon={Icon.TravelExplore}
@ -135,16 +134,6 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {

      <NavOption title={langui.chronology} url="/wiki/chronology" border />
    </SubPanel>
-    ),
-    [
-      groupingMethod,
-      hoverable,
-      keepInfoVisible,
-      langui,
-      searchName,
-      setKeepInfoVisible,
-      toggleKeepInfoVisible,
-    ]
  );

  const groupingFunction = useCallback(
@ -172,8 +161,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
    [groupingMethod, langui]
  );

-  const contentPanel = useMemo(
-    () => (
+  const contentPanel = (
    <ContentPanel width={ContentPanelWidthSizes.Full}>
      <SmartList
        items={filterHasAttributes(pages, ["id", "attributes"] as const)}
@ -198,9 +186,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
            thumbnailRounded
            thumbnailForceAspectRatio
            keepInfoVisible={keepInfoVisible}
-              topChips={filterHasAttributes(item.attributes.tags?.data, [
-                "attributes",
-              ] as const).map(
+            topChips={filterHasAttributes(item.attributes.tags?.data, ["attributes"] as const).map(
              (tag) => tag.attributes.titles?.[0]?.title ?? prettySlug(tag.attributes.slug)
            )}
            bottomChips={filterHasAttributes(item.attributes.categories?.data, [
@ -228,8 +214,6 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
        paginationItemPerPage={25}
      />
    </ContentPanel>
-    ),
-    [groupingFunction, keepInfoVisible, pages, searchName, isContentPanelAtLeast4xl]
  );

  if (isTerminalMode) {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -249,6 +249,21 @@ module.exports = {
      });
    }),

+    /* Webkit fixes */
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        ".webkit-fixes": {
+          "*": {
+            "--tw-drop-shadow": "unset !important",
+            "--tw-shadow": "unset !important",
+          },
+          ".texture-paper-dots": {
+            backgroundImage: "unset !important",
+          },
+        },
+      });
+    }),
+
    /* Add support for break-wrods CSS attribute */
    plugin(({ addUtilities }) => {
      addUtilities({