From f701f8d05f64843f7921a95f0b710da0f323d0f5 Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Mon, 30 Oct 2023 12:23:24 +0100
Subject: [PATCH] refactor: remove show-if in favour of conditionals

This prevents a problem where show-if can trigger an error if a value is checked to exist with it.

Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 frontend/src/app/(editor)/profile/page.tsx    |  5 +-
 .../loading-screen/loading-screen.tsx         |  7 +-
 .../copyable-field/copyable-field.tsx         |  7 +-
 .../copyable/hooks/use-copy-overlay.tsx       | 11 +--
 .../hedge-doc-logo-horizontal-grey.tsx        |  5 +-
 .../common/icon-button/icon-button.tsx        |  7 +-
 .../components/common/modals/common-modal.tsx | 41 ++++++-----
 .../create-non-existing-note-hint.tsx         |  5 +-
 .../note-loading-boundary.tsx                 |  5 +-
 .../common/pagination/pager-pagination.tsx    | 23 +++---
 .../renderer-iframe/renderer-iframe.tsx       |  7 +-
 .../__snapshots__/show-if.spec.tsx.snap       |  9 ---
 .../common/show-if/show-if.spec.tsx           | 19 -----
 .../src/components/common/show-if/show-if.tsx | 21 ------
 .../common/user-avatar/user-avatar.tsx        |  5 +-
 .../document-infobar.tsx                      | 17 ++---
 .../editor-pane/tool-bar/tool-bar.tsx         | 73 ++++++++++---------
 .../upload-image-button.tsx                   |  5 +-
 .../sidebar/sidebar-button/sidebar-button.tsx |  5 +-
 .../sidebar-menu-info-entry.tsx               |  5 +-
 .../aliases-modal/aliases-list-entry.tsx      |  9 +--
 .../import-markdown-sidebar-entry.tsx         |  5 +-
 .../note-info-line-word-count.tsx             |  9 +--
 .../permission-entry-user.tsx                 |  6 +-
 .../revisions-modal/revision-list-entry.tsx   |  7 +-
 .../share-modal/share-modal.tsx               | 21 +++---
 .../user-line/user-line.tsx                   |  5 +-
 .../editor-page/splitter/splitter.tsx         |  7 +-
 .../table-of-contents/table-of-contents.tsx   |  7 +-
 .../use-build-react-dom-from-toc-ast.tsx      | 11 +--
 .../error-pages/common-error-page.tsx         |  5 +-
 .../shortcuts-modal/shortcut-line.tsx         | 21 +++---
 .../version-info-modal/version-info-modal.tsx |  9 +--
 .../history-page/entry-menu/entry-menu.tsx    | 19 ++---
 .../history-toolbar/history-toolbar.tsx       |  5 +-
 .../intro-page/intro-custom-content.tsx       |  4 +-
 .../navigation/sign-in-button.tsx             | 17 +++--
 .../help-dropdown/submenues/legal-submenu.tsx | 13 ++--
 .../translated-dropdown-item.tsx              |  5 +-
 .../note-title-element/note-title-element.tsx |  5 +-
 .../login-page/guest/guest-card.tsx           |  5 +-
 .../local-login/local-login-card.tsx          | 11 +--
 .../click-shield/click-shield.tsx             | 28 ++++---
 .../notifications/ui-notification-toast.tsx   |  5 +-
 .../access-tokens/profile-access-tokens.tsx   | 11 +--
 .../register-page/register-infos.tsx          | 17 +++--
 .../document/document-toc-sidebar.tsx         |  7 +-
 .../abcjs/abc-frame.tsx                       |  7 +-
 .../flowchart/flowchart.tsx                   |  7 +-
 .../graphviz/graphviz-frame.tsx               |  7 +-
 .../mermaid/mermaid-chart.tsx                 |  7 +-
 .../vega-lite/vega-lite-chart.tsx             |  7 +-
 52 files changed, 239 insertions(+), 352 deletions(-)
 delete mode 100644 frontend/src/components/common/show-if/__snapshots__/show-if.spec.tsx.snap
 delete mode 100644 frontend/src/components/common/show-if/show-if.spec.tsx
 delete mode 100644 frontend/src/components/common/show-if/show-if.tsx

diff --git a/frontend/src/app/(editor)/profile/page.tsx b/frontend/src/app/(editor)/profile/page.tsx
index 428ebb6eb..14a1c5ad6 100644
--- a/frontend/src/app/(editor)/profile/page.tsx
+++ b/frontend/src/app/(editor)/profile/page.tsx
@@ -7,7 +7,6 @@
  */
 import { AuthProviderType } from '../../../api/config/types'
 import { Redirect } from '../../../components/common/redirect'
-import { ShowIf } from '../../../components/common/show-if/show-if'
 import { LandingLayout } from '../../../components/landing-layout/landing-layout'
 import { ProfileAccessTokens } from '../../../components/profile-page/access-tokens/profile-access-tokens'
 import { ProfileAccountManagement } from '../../../components/profile-page/account-management/profile-account-management'
@@ -35,9 +34,7 @@ const ProfilePage: NextPage = () => {
         <Row className='h-100 flex justify-content-center'>
           <Col lg={6}>
             <ProfileDisplayName />
-            <ShowIf condition={userProvider === (AuthProviderType.LOCAL as string)}>
-              <ProfileChangePassword />
-            </ShowIf>
+            {userProvider === (AuthProviderType.LOCAL as string) && <ProfileChangePassword />}
             <ProfileAccessTokens />
             <ProfileAccountManagement />
           </Col>
diff --git a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx
index c19944370..424e7b24d 100644
--- a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx
+++ b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx
@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../../common/show-if/show-if'
 import styles from '../application-loader.module.scss'
 import { LoadingAnimation } from './loading-animation'
 import type { ReactElement } from 'react'
@@ -27,9 +26,7 @@ export const LoadingScreen: React.FC<LoadingScreenProps> = ({ errorMessage }) =>
           <LoadingAnimation error={!!errorMessage} />
         </span>
       </div>
-      <ShowIf condition={!!errorMessage}>
-        <Alert variant={'danger'}>{errorMessage}</Alert>
-      </ShowIf>
+      {errorMessage !== undefined && <Alert variant={'danger'}>{errorMessage}</Alert>}
     </div>
   )
 }
diff --git a/frontend/src/components/common/copyable/copyable-field/copyable-field.tsx b/frontend/src/components/common/copyable/copyable-field/copyable-field.tsx
index f458b29e0..6244807f1 100644
--- a/frontend/src/components/common/copyable/copyable-field/copyable-field.tsx
+++ b/frontend/src/components/common/copyable/copyable-field/copyable-field.tsx
@@ -1,11 +1,10 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { Logger } from '../../../../utils/logger'
 import { UiIcon } from '../../icons/ui-icon'
-import { ShowIf } from '../../show-if/show-if'
 import { CopyToClipboardButton } from '../copy-to-clipboard-button/copy-to-clipboard-button'
 import React, { useCallback, useMemo } from 'react'
 import { Button, FormControl, InputGroup } from 'react-bootstrap'
@@ -54,13 +53,13 @@ export const CopyableField: React.FC<CopyableFieldProps> = ({ content, shareOrig
       <InputGroup.Text>
         <CopyToClipboardButton variant={'outline-secondary'} content={content} />
       </InputGroup.Text>
-      <ShowIf condition={sharingSupported}>
+      {sharingSupported && (
         <InputGroup.Text>
           <Button variant='secondary' title={'Share'} onClick={doShareAction}>
             <UiIcon icon={IconShare} />
           </Button>
         </InputGroup.Text>
-      </ShowIf>
+      )}
     </InputGroup>
   )
 }
diff --git a/frontend/src/components/common/copyable/hooks/use-copy-overlay.tsx b/frontend/src/components/common/copyable/hooks/use-copy-overlay.tsx
index 9a22fd812..f6b6659d5 100644
--- a/frontend/src/components/common/copyable/hooks/use-copy-overlay.tsx
+++ b/frontend/src/components/common/copyable/hooks/use-copy-overlay.tsx
@@ -1,10 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { Logger } from '../../../../utils/logger'
-import { ShowIf } from '../../show-if/show-if'
 import type { ReactElement, RefObject } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Overlay, Tooltip } from 'react-bootstrap'
@@ -64,12 +63,8 @@ export const useCopyOverlay = (
       <Overlay target={clickComponent} show={showState !== SHOW_STATE.HIDDEN} placement='top'>
         {(props) => (
           <Tooltip id={`copied_${tooltipId}`} {...props}>
-            <ShowIf condition={showState === SHOW_STATE.ERROR}>
-              <Trans i18nKey={'copyOverlay.error'} />
-            </ShowIf>
-            <ShowIf condition={showState === SHOW_STATE.SUCCESS}>
-              <Trans i18nKey={'copyOverlay.success'} />
-            </ShowIf>
+            {showState === SHOW_STATE.ERROR && <Trans i18nKey={'copyOverlay.error'} />}
+            {showState === SHOW_STATE.SUCCESS && <Trans i18nKey={'copyOverlay.success'} />}
           </Tooltip>
         )}
       </Overlay>
diff --git a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx
index b22f50004..7c3f83e9b 100644
--- a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx
+++ b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx
@@ -5,7 +5,6 @@
  */
 import { LogoSize } from './logo-size'
 import React from 'react'
-import { ShowIf } from '../show-if/show-if'
 
 interface HedgeDocLogoHorizontalGreyProps {
   color: 'dark' | 'light'
@@ -68,13 +67,13 @@ export const HedgeDocLogoHorizontalGrey: React.FC<HedgeDocLogoHorizontalGreyProp
           fill='#fff'
           transform='matrix(0 -3.2849556 -3.2849556 0 254.51398 261.79888)'
         />
-        <ShowIf condition={showText}>
+        {showText && (
           <path
             d='m914.05273 122.625v70.36133c-4.97999-5.27564-10.96602-9.39883-17.95312-12.375-6.99039-2.97289-14.57179-4.46094-22.74805-4.46094-10.77794 0-20.42618 2.50598-28.9375 7.52539s-15.20529 11.89616-20.07031 20.63086c-4.87159 8.73798-7.30664 18.67703-7.30664 29.82617 0 11.15571 2.43505 21.10062 7.30664 29.83203 4.86502 8.7347 11.55899 15.6095 20.07031 20.62891s18.15956 7.5293 28.9375 7.5293c8.39963 0 16.16843-1.58011 23.30664-4.74024 7.13493-3.16012 13.19251-7.48988 18.17578-12.99219l1.00586 15.50196h16.61133v-167.26758zm-393.29492.002v167.26563h19.51563v-73.5957h95.33984v73.5957h19.51172v-167.26568h-19.51172v75.82813h-95.33984v-75.82813zm724.69919.22071v167.26757h45.4961c32.8594 0 58.0977-7.32308 75.7149-21.9707 17.6172-14.64105 26.4277-35.27334 26.4277-61.88476 0-26.53916-8.8105-47.07674-26.4277-61.60938s-42.8555-21.80273-75.7149-21.80273zm19.5157 17.8457h25.9804c26.4636 0 46.7614 5.70463 60.8867 17.11328 14.1221 11.41522 21.1856 27.56409 21.1856 48.45313 0 20.9613-7.0635 37.20817-21.1856 48.72851-14.1253 11.52363-34.4231 17.28711-60.8867 17.28711h-25.9804zm-248.3301 35.45508c-10.778 0-20.42425 2.50988-28.93557 7.52929-8.51132 5.01942-15.20725 11.89421-20.07226 20.62891-4.87159 8.7347-7.30469 18.6757-7.30469 29.82813 0 11.15242 2.4331 21.09538 7.30469 29.83007 4.86501 8.7347 11.56094 15.61145 20.07226 20.63086 8.51132 5.01942 18.15757 7.52539 28.93557 7.52539 8.1762 0 15.7596-1.48805 22.75-4.46093 6.9871-2.97289 12.9712-7.09608 17.9512-12.375v5.79492c0 15.16664-3.81 27.30097-11.4278 36.41015-7.6244 9.10262-19.3481 13.65625-35.1816 13.65625-6.2447 0-12.04336-1.02121-17.39456-3.06445-5.35447-2.04653-10.11335-4.88956-14.27539-8.5293l-9.14257 15.38672c5.49901 4.08977 11.66853 7.2633 18.50781 9.53321 6.83928 2.2699 14.16041 3.40039 21.96871 3.40039 14.1976 0 26.1478-2.88015 35.8516-8.63867 9.7005-5.76182 17.0402-13.8114 22.0234-24.14258 4.98-10.33447 7.4688-22.37675 7.4688-36.13086v-100.58208h-16.6152l-1.004 15.50195c-4.9799-5.5023-11.0375-9.83206-18.1757-12.99219-7.135-3.16013-14.9051-4.74023-23.3047-4.74023zm591.7656.002c-11.1524 0-21.0973 2.50989-29.832 7.5293-8.7347 5.01612-15.6095 11.89092-20.6289 20.6289-5.0162 8.7347-7.5254 18.67375-7.5254 29.82618 0 11.15242 2.5092 21.09671 7.5254 29.82812 5.0194 8.73798 11.8942 15.61278 20.6289 20.62891 8.7347 5.01941 18.6796 7.52929 29.832 7.52929 8.3996 0 16.1288-1.44899 23.1914-4.34961 7.0627-2.90061 13.1951-6.95092 18.3984-12.15429l-12.8242-12.71094c-3.4952 3.86639-7.6932 6.91014-12.5976 9.14063-4.9078 2.23048-10.2978 3.34765-16.168 3.34765-7.5094 0-14.2007-1.78277-20.0742-5.35351-5.8735-3.56747-10.5026-8.47539-13.8828-14.7168-3.3835-6.2447-5.0723-13.30885-5.0723-21.18945 0-7.95288 1.6888-15.03363 5.0723-21.24219 3.3802-6.20528 8.0093-11.09465 13.8828-14.66211 5.8735-3.57075 12.5648-5.35352 20.0742-5.35352 5.8702 0 11.2602 1.09605 16.168 3.28711 4.9044 2.19435 9.1024 5.25923 12.5976 9.20117l12.8242-12.82421c-5.2033-5.12782-11.3357-9.14236-18.3984-12.04297-7.0626-2.90062-14.7918-4.34766-23.1914-4.34766zm-867.86718.002c-11.00132 0-20.85027 2.494-29.54883 7.47071-8.69856 4.98327-15.53759 11.8057-20.51758 20.46484s-7.47266 18.49149-7.47266 29.49609c0 11.30025 2.65627 21.37042 7.97461 30.2168 5.31178 8.84639 12.65475 15.77942 22.02344 20.79883 9.36541 5.01613 32.11328 7.52539 32.11328 7.52539 7.50941 0 15.29543-1.26551 23.36328-3.79492 8.06457-2.52613 16.14797-7.17049 24.25196-13.9375l-10.81641-13.82617c-5.5023 5.20337-11.59699 8.97814-18.28516 11.32031-6.69474 2.33889-13.04765 3.51172-19.07226 3.51172-10.8535 0-20.12695-3.1801-27.82031-9.53321-7.69337-6.35967-12.46885-14.48142-14.32813-24.36914h94.56055v-7.46875c0-11.22469-2.41783-21.18948-7.25-29.88476-4.83217-8.69856-11.48576-15.53626-19.96094-20.51953-8.47519-4.97671-18.21024-7.47071-29.21484-7.47071zm420.61328 0c-11.0013 0-20.8483 2.494-29.5469 7.47071-8.6985 4.98327-15.5395 11.8057-20.5195 20.46484s-7.4727 18.49149-7.4727 29.49609c0 11.30025 2.6583 21.37042 7.9766 30.2168 5.3118 8.84639 12.6561 15.77942 22.0215 20.79883 9.3654 5.01613 20.0706 7.52539 32.1133 7.52539 7.5094 0 15.2954-1.26551 23.3632-3.79492 8.0646-2.52613 16.15-7.17049 24.254-13.9375l-10.8184-13.82617c-5.5023 5.20337-11.595 8.97814-18.2832 11.32031-6.6915 2.33889-13.0496 3.51172-19.0742 3.51172-10.8535 0-20.125-3.1801-27.8184-9.53321-7.6934-6.35967-12.4708-14.48142-14.3301-24.36914h94.5606v-7.46875c0-11.22469-2.4179-21.18948-7.25-29.88476-4.8322-8.69856-11.4838-15.53626-19.959-20.51953-8.4752-4.97671-18.2122-7.47071-29.2168-7.47071zm311.2109 0c-11.1524 0-21.0914 2.50598-29.8261 7.52539-8.738 5.01942-15.6134 11.89617-20.6329 20.63086-5.0161 8.7347-7.5273 18.67704-7.5273 29.82618 0 11.15242 2.5112 21.09733 7.5273 29.83203 5.0195 8.73469 11.8949 15.60949 20.6329 20.6289 8.7347 5.01942 18.6737 7.52539 29.8261 7.52539 11.1492 0 21.0935-2.50597 29.8282-7.52539 8.7347-5.01941 15.6095-11.89421 20.6289-20.6289 5.0194-8.7347 7.5254-18.67961 7.5254-29.83203 0-11.14914-2.506-21.09148-7.5254-29.82618-5.0194-8.73469-11.8942-15.61144-20.6289-20.63086-8.7347-5.01941-18.679-7.52539-29.8282-7.52539zm-454.0488 16.72251c7.5061 0 14.2001 1.78472 20.0703 5.35547 5.8735 3.56746 10.5026 8.45816 13.8828 14.66015 3.3835 6.20857 5.0743 13.29127 5.0743 21.24415 0 7.8806-1.6908 14.9428-5.0743 21.1875-3.3802 6.2447-8.0093 11.14995-13.8828 14.7207-5.8702 3.56746-12.5642 5.35156-20.0703 5.35156-7.5094 0-14.202-1.7841-20.07226-5.35156-5.8735-3.57075-10.50259-8.476-13.88281-14.7207-3.38679-6.2447-5.07422-13.3069-5.07422-21.1875 0-7.95288 1.68743-15.03558 5.07422-21.24415 3.38022-6.20199 8.00931-11.09269 13.88281-14.66015 5.87026-3.57075 12.56286-5.35547 20.07226-5.35547zm-143.29296.002c7.50941 0 14.20009 1.7841 20.07031 5.35157 5.8735 3.57074 10.50321 8.45878 13.88672 14.66406 3.38022 6.20856 5.07226 13.29064 5.07226 21.24023 0 7.88061-1.69204 14.94476-5.07226 21.18946-3.38351 6.2447-8.01322 11.15128-13.88672 14.71875-5.87022 3.57074-12.5609 5.35546-20.07031 5.35546s-14.2001-1.78472-20.07032-5.35546c-5.8735-3.56747-10.50259-8.47405-13.88281-14.71875-3.3835-6.2447-5.07617-13.30885-5.07617-21.18946 0-7.94959 1.69267-15.03167 5.07617-21.24023 3.38022-6.20528 8.00931-11.09332 13.88281-14.66406 5.87022-3.56747 12.56091-5.35157 20.07032-5.35157zm-134.5918.002c9.73661 0 17.98823 3.06487 24.75195 9.20117 6.76373 6.13301 10.96566 14.06675 12.60157 23.80664h-75.60352c1.63591-9.58879 5.94845-17.4887 12.93555-23.69727 6.9871-6.20528 15.42673-9.31054 25.31445-9.31054zm420.61526 0c9.7366 0 17.9882 3.06487 24.7519 9.20117 6.7638 6.13301 10.9657 14.06675 12.6016 23.80664h-75.6035c1.6359-9.58879 5.9484-17.4887 12.9355-23.69727 6.9871-6.20528 15.4268-9.31054 25.3145-9.31054zm311.3183 0c7.5062 0 14.2021 1.78081 20.0723 5.35156 5.8735 3.57075 10.5013 8.45878 13.8848 14.66406 3.3802 6.20528 5.0722 13.28736 5.0722 21.24024 0 7.8806-1.692 14.94475-5.0722 21.18945-3.3835 6.2447-8.0113 11.148-13.8848 14.71875-5.8702 3.56746-12.5661 5.35156-20.0723 5.35156-7.5094 0-14.2001-1.7841-20.0703-5.35156-5.8735-3.57075-10.5026-8.47405-13.8828-14.71875-3.3868-6.2447-5.0742-13.30885-5.0742-21.18945 0-7.95288 1.6874-15.03496 5.0742-21.24024 3.3802-6.20528 8.0093-11.09331 13.8828-14.66406 5.8702-3.57075 12.5609-5.35156 20.0703-5.35156z'
             fill={color === 'light' ? '#333' : '#fff'}
             strokeWidth='3.28496'
           />
-        </ShowIf>
+        )}
       </g>
     </svg>
   )
diff --git a/frontend/src/components/common/icon-button/icon-button.tsx b/frontend/src/components/common/icon-button/icon-button.tsx
index 046d36c6e..744f4c478 100644
--- a/frontend/src/components/common/icon-button/icon-button.tsx
+++ b/frontend/src/components/common/icon-button/icon-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,7 +7,6 @@ import { concatCssClasses } from '../../../utils/concat-css-classes'
 import type { PropsWithDataTestId } from '../../../utils/test-id'
 import { testId } from '../../../utils/test-id'
 import { UiIcon } from '../icons/ui-icon'
-import { ShowIf } from '../show-if/show-if'
 import styles from './icon-button.module.scss'
 import React, { useMemo } from 'react'
 import type { ButtonProps } from 'react-bootstrap'
@@ -52,9 +51,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
       <span className={`${styles['icon-part']}`}>
         <UiIcon size={iconSize} icon={icon} className={'icon'} />
       </span>
-      <ShowIf condition={!!children}>
-        <span className={`${styles['text-part']}`}>{children}</span>
-      </ShowIf>
+      {children !== undefined && <span className={`${styles['text-part']}`}>{children}</span>}
     </Button>
   )
 }
diff --git a/frontend/src/components/common/modals/common-modal.tsx b/frontend/src/components/common/modals/common-modal.tsx
index 9bab6992e..84f618b15 100644
--- a/frontend/src/components/common/modals/common-modal.tsx
+++ b/frontend/src/components/common/modals/common-modal.tsx
@@ -8,7 +8,6 @@ import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { testId } from '../../../utils/test-id'
 import { UiIcon } from '../icons/ui-icon'
-import { ShowIf } from '../show-if/show-if'
 import type { PropsWithChildren, ReactElement } from 'react'
 import React, { Fragment, useMemo } from 'react'
 import { Modal } from 'react-bootstrap'
@@ -66,25 +65,27 @@ export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
     return titleI18nKey !== undefined ? <Trans i18nKey={titleI18nKey} /> : <span>{title}</span>
   }, [titleI18nKey, title])
 
+  if (!show) {
+    return null
+  }
+
   return (
-    <ShowIf condition={show}>
-      <Modal
-        {...cypressId(props)}
-        show={show}
-        onHide={onHide}
-        animation={true}
-        {...testId('commonModal')}
-        dialogClassName={concatCssClasses(additionalClasses)}
-        size={modalSize}>
-        <Modal.Header closeButton={!!showCloseButton}>
-          <Modal.Title>
-            <UiIcon icon={titleIcon} nbsp={true} />
-            {titleElement}
-          </Modal.Title>
-          {additionalTitleElement ?? <Fragment />}
-        </Modal.Header>
-        {children}
-      </Modal>
-    </ShowIf>
+    <Modal
+      {...cypressId(props)}
+      show={show}
+      onHide={onHide}
+      animation={true}
+      {...testId('commonModal')}
+      dialogClassName={concatCssClasses(additionalClasses)}
+      size={modalSize}>
+      <Modal.Header closeButton={!!showCloseButton}>
+        <Modal.Title>
+          <UiIcon icon={titleIcon} nbsp={true} />
+          {titleElement}
+        </Modal.Title>
+        {additionalTitleElement ?? <Fragment />}
+      </Modal.Header>
+      {children}
+    </Modal>
   )
 }
diff --git a/frontend/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx b/frontend/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx
index 991efc2e5..f898e5ac8 100644
--- a/frontend/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx
+++ b/frontend/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx
@@ -6,7 +6,6 @@
 import { createNoteWithPrimaryAlias } from '../../../api/notes'
 import { testId } from '../../../utils/test-id'
 import { UiIcon } from '../icons/ui-icon'
-import { ShowIf } from '../show-if/show-if'
 import React, { useCallback, useEffect } from 'react'
 import { Alert, Button } from 'react-bootstrap'
 import {
@@ -85,9 +84,7 @@ export const CreateNonExistingNoteHint: React.FC<CreateNonExistingNoteHintProps>
             className='mx-2'
             onClick={onClickHandler}
             {...testId('createNoteButton')}>
-            <ShowIf condition={returnState.loading}>
-              <UiIcon icon={IconArrowRepeat} className={'me-2'} spin={true} />
-            </ShowIf>
+            {returnState.loading && <UiIcon icon={IconArrowRepeat} className={'me-2'} spin={true} />}
             <Trans i18nKey={'noteLoadingBoundary.createNote.create'} />
           </Button>
         </div>
diff --git a/frontend/src/components/common/note-loading-boundary/note-loading-boundary.tsx b/frontend/src/components/common/note-loading-boundary/note-loading-boundary.tsx
index 37891660f..87b2807be 100644
--- a/frontend/src/components/common/note-loading-boundary/note-loading-boundary.tsx
+++ b/frontend/src/components/common/note-loading-boundary/note-loading-boundary.tsx
@@ -10,7 +10,6 @@ import { Logger } from '../../../utils/logger'
 import { LoadingScreen } from '../../application-loader/loading-screen/loading-screen'
 import { CommonErrorPage } from '../../error-pages/common-error-page'
 import { CustomAsyncLoadingBoundary } from '../async-loading-boundary/custom-async-loading-boundary'
-import { ShowIf } from '../show-if/show-if'
 import { CreateNonExistingNoteHint } from './create-non-existing-note-hint'
 import { useLoadNoteFromServer } from './hooks/use-load-note-from-server'
 import type { PropsWithChildren } from 'react'
@@ -59,9 +58,9 @@ export const NoteLoadingBoundary: React.FC<PropsWithChildren<NoteIdProps>> = ({
       <CommonErrorPage
         titleI18nKey={`${errorI18nKeyPrefix}.title`}
         descriptionI18nKey={`${errorI18nKeyPrefix}.description`}>
-        <ShowIf condition={error instanceof ApiError && error.statusCode === 404}>
+        {error instanceof ApiError && error.statusCode === 404 && (
           <CreateNonExistingNoteHint onNoteCreated={loadNoteFromServer} noteId={noteId} />
-        </ShowIf>
+        )}
       </CommonErrorPage>
     )
   }, [error, loadNoteFromServer, noteId])
diff --git a/frontend/src/components/common/pagination/pager-pagination.tsx b/frontend/src/components/common/pagination/pager-pagination.tsx
index 97b9d77b4..dafbefc21 100644
--- a/frontend/src/components/common/pagination/pager-pagination.tsx
+++ b/frontend/src/components/common/pagination/pager-pagination.tsx
@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../show-if/show-if'
 import { PagerItem } from './pager-item'
 import React, { useEffect, useMemo, useState } from 'react'
 import { Pagination } from 'react-bootstrap'
@@ -70,17 +69,21 @@ export const PagerPagination: React.FC<PaginationProps> = ({
 
   return (
     <Pagination dir='ltr'>
-      <ShowIf condition={correctedLowerPageIndex > 0}>
-        <PagerItem key={0} index={0} onClick={setPageIndex} />
-        <Pagination.Ellipsis disabled />
-      </ShowIf>
+      {correctedLowerPageIndex > 0 && (
+        <>
+          <PagerItem key={0} index={0} onClick={setPageIndex} />
+          <Pagination.Ellipsis disabled />
+        </>
+      )}
       {paginationItemsBefore}
       <Pagination.Item active>{correctedPageIndex + 1}</Pagination.Item>
       {paginationItemsAfter}
-      <ShowIf condition={correctedUpperPageIndex < lastPageIndex}>
-        <Pagination.Ellipsis disabled />
-        <PagerItem key={lastPageIndex} index={lastPageIndex} onClick={setPageIndex} />
-      </ShowIf>
+      {correctedUpperPageIndex < lastPageIndex && (
+        <>
+          <Pagination.Ellipsis disabled />
+          <PagerItem key={lastPageIndex} index={lastPageIndex} onClick={setPageIndex} />
+        </>
+      )}
     </Pagination>
   )
 }
diff --git a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
index abe822be6..cf8fe8409 100644
--- a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
+++ b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,7 +19,6 @@ import type {
   SetScrollStateMessage
 } from '../../render-page/window-post-message-communicator/rendering-message'
 import { CommunicationMessageType } from '../../render-page/window-post-message-communicator/rendering-message'
-import { ShowIf } from '../show-if/show-if'
 import { WaitSpinner } from '../wait-spinner/wait-spinner'
 import { useEffectOnRenderTypeChange } from './hooks/use-effect-on-render-type-change'
 import { useForceRenderPageUrlOnIframeLoadCallback } from './hooks/use-force-render-page-url-on-iframe-load-callback'
@@ -176,9 +175,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
 
   return (
     <Fragment>
-      <ShowIf condition={!rendererReady && showWaitSpinner}>
-        <WaitSpinner />
-      </ShowIf>
+      {!rendererReady && showWaitSpinner && <WaitSpinner />}
       <iframe
         style={{ height: `${frameHeight}px` }}
         {...cypressId('documentIframe')}
diff --git a/frontend/src/components/common/show-if/__snapshots__/show-if.spec.tsx.snap b/frontend/src/components/common/show-if/__snapshots__/show-if.spec.tsx.snap
deleted file mode 100644
index 2829b934f..000000000
--- a/frontend/src/components/common/show-if/__snapshots__/show-if.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ShowIf does not render child if condition is false 1`] = `<div />`;
-
-exports[`ShowIf renders child if condition is true 1`] = `
-<div>
-  test
-</div>
-`;
diff --git a/frontend/src/components/common/show-if/show-if.spec.tsx b/frontend/src/components/common/show-if/show-if.spec.tsx
deleted file mode 100644
index 39347aedf..000000000
--- a/frontend/src/components/common/show-if/show-if.spec.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { ShowIf } from './show-if'
-import { render } from '@testing-library/react'
-
-describe('ShowIf', () => {
-  it('renders child if condition is true', () => {
-    const view = render(<ShowIf condition={true}>test</ShowIf>)
-    expect(view.container).toMatchSnapshot()
-  })
-
-  it('does not render child if condition is false', () => {
-    const view = render(<ShowIf condition={false}>test</ShowIf>)
-    expect(view.container).toMatchSnapshot()
-  })
-})
diff --git a/frontend/src/components/common/show-if/show-if.tsx b/frontend/src/components/common/show-if/show-if.tsx
deleted file mode 100644
index e6257fff3..000000000
--- a/frontend/src/components/common/show-if/show-if.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import type { PropsWithChildren } from 'react'
-import React, { Fragment } from 'react'
-
-export interface ShowIfProps {
-  condition: boolean
-}
-
-/**
- * Renders the children if the condition is met.
- *
- * @param children The children to show if the condition is met.
- * @param condition If the children should be shown
- */
-export const ShowIf: React.FC<PropsWithChildren<ShowIfProps>> = ({ children, condition }) => {
-  return condition ? <Fragment>{children}</Fragment> : null
-}
diff --git a/frontend/src/components/common/user-avatar/user-avatar.tsx b/frontend/src/components/common/user-avatar/user-avatar.tsx
index 728f71595..6294daeb5 100644
--- a/frontend/src/components/common/user-avatar/user-avatar.tsx
+++ b/frontend/src/components/common/user-avatar/user-avatar.tsx
@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { useTranslatedText } from '../../../hooks/common/use-translated-text'
-import { ShowIf } from '../show-if/show-if'
 import styles from './user-avatar.module.scss'
 import React, { useMemo } from 'react'
 import { useAvatarUrl } from './hooks/use-avatar-url'
@@ -64,9 +63,7 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({
         height={imageSize}
         width={imageSize}
       />
-      <ShowIf condition={showName}>
-        <span className={`ms-2 me-1 ${styles['user-line-name']}`}>{displayName}</span>
-      </ShowIf>
+      {showName && <span className={`ms-2 me-1 ${styles['user-line-name']}`}>{displayName}</span>}
     </span>
   )
 }
diff --git a/frontend/src/components/document-read-only-page/document-infobar.tsx b/frontend/src/components/document-read-only-page/document-infobar.tsx
index 76d3cafe8..4c96d3919 100644
--- a/frontend/src/components/document-read-only-page/document-infobar.tsx
+++ b/frontend/src/components/document-read-only-page/document-infobar.tsx
@@ -6,7 +6,6 @@
 import { useApplicationState } from '../../hooks/common/use-application-state'
 import { useTranslatedText } from '../../hooks/common/use-translated-text'
 import { InternalLink } from '../common/links/internal-link'
-import { ShowIf } from '../common/show-if/show-if'
 import { NoteInfoLineCreatedAt } from '../editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-created-at'
 import { NoteInfoLineUpdatedBy } from '../editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-updated-by'
 import styles from './document-infobar.module.scss'
@@ -36,15 +35,13 @@ export const DocumentInfobar: React.FC = () => {
         </div>
         <span className={'ms-auto'}>
           {noteDetails.viewCount} <Trans i18nKey={'views.readOnly.viewCount'} />
-          <ShowIf condition={true}>
-            <InternalLink
-              text={''}
-              href={`/n/${noteDetails.primaryAddress}`}
-              icon={IconPencil}
-              className={'text-primary text-decoration-none mx-1'}
-              title={linkTitle}
-            />
-          </ShowIf>
+          <InternalLink
+            text={''}
+            href={`/n/${noteDetails.primaryAddress}`}
+            icon={IconPencil}
+            className={'text-primary text-decoration-none mx-1'}
+            title={linkTitle}
+          />
         </span>
       </div>
       <div className={'col-md'}>&nbsp;</div>
diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
index 939745c74..b5fd58541 100644
--- a/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
+++ b/frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
@@ -5,7 +5,6 @@
  */
 import { useMayEdit } from '../../../../hooks/common/use-may-edit'
 import { concatCssClasses } from '../../../../utils/concat-css-classes'
-import { ShowIf } from '../../../common/show-if/show-if'
 import { BoldButton } from './buttons/bold-button'
 import { CheckListButton } from './buttons/check-list-button'
 import { CodeFenceButton } from './buttons/code-fence-button'
@@ -38,41 +37,43 @@ const EmojiPickerButton = React.lazy(() => import('./emoji-picker/emoji-picker-b
 export const ToolBar: React.FC = () => {
   const mayEdit = useMayEdit()
 
+  if (!mayEdit) {
+    return null
+  }
+
   return (
-    <ShowIf condition={mayEdit}>
-      <ButtonToolbar className={concatCssClasses(styles.toolbar, 'my-1')}>
-        <ButtonGroup className={'mx-1 flex-wrap'}>
-          <BoldButton />
-          <ItalicButton />
-          <UnderlineButton />
-          <StrikethroughButton />
-          <SubscriptButton />
-          <SuperscriptButton />
-          <HighlightButton />
-        </ButtonGroup>
-        <ButtonGroup className={'mx-1 flex-wrap'}>
-          <HeaderLevelButton />
-          <CodeFenceButton />
-          <QuotesButton />
-          <UnorderedListButton />
-          <OrderedListButton />
-          <CheckListButton />
-        </ButtonGroup>
-        <ButtonGroup className={'mx-1 flex-wrap'}>
-          <LinkButton />
-          <ImageLinkButton />
-          <UploadImageButton />
-        </ButtonGroup>
-        <ButtonGroup className={'mx-1 flex-wrap'}>
-          <TablePickerButton />
-          <HorizontalLineButton />
-          <CollapsibleBlockButton />
-          <CommentButton />
-          <Suspense fallback={<Fragment />}>
-            <EmojiPickerButton />
-          </Suspense>
-        </ButtonGroup>
-      </ButtonToolbar>
-    </ShowIf>
+    <ButtonToolbar className={concatCssClasses(styles.toolbar, 'my-1')}>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <BoldButton />
+        <ItalicButton />
+        <UnderlineButton />
+        <StrikethroughButton />
+        <SubscriptButton />
+        <SuperscriptButton />
+        <HighlightButton />
+      </ButtonGroup>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <HeaderLevelButton />
+        <CodeFenceButton />
+        <QuotesButton />
+        <UnorderedListButton />
+        <OrderedListButton />
+        <CheckListButton />
+      </ButtonGroup>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <LinkButton />
+        <ImageLinkButton />
+        <UploadImageButton />
+      </ButtonGroup>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <TablePickerButton />
+        <HorizontalLineButton />
+        <CollapsibleBlockButton />
+        <CommentButton />
+        <Suspense fallback={<Fragment />}>
+          <EmojiPickerButton />
+        </Suspense>
+      </ButtonGroup>
+    </ButtonToolbar>
   )
 }
diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
index afe1a4936..d1c752dea 100644
--- a/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
+++ b/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
@@ -5,7 +5,6 @@
  */
 import { cypressId } from '../../../../../utils/cypress-attribute'
 import { Logger } from '../../../../../utils/logger'
-import { ShowIf } from '../../../../common/show-if/show-if'
 import { acceptedMimeTypes } from '../../../../common/upload-image-mimetypes'
 import { UploadInput } from '../../../../common/upload-input'
 import { useCodemirrorReferenceContext } from '../../../change-content-context/codemirror-reference-context'
@@ -47,14 +46,14 @@ export const UploadImageButton: React.FC = () => {
   return (
     <Fragment>
       <ToolbarButton i18nKey={'uploadImage'} icon={IconUpload} onClick={buttonClick}>
-        <ShowIf condition={!!codeMirror}>
+        {codeMirror !== undefined && (
           <UploadInput
             onLoad={onUploadImage}
             allowedFileTypes={acceptedMimeTypes}
             onClickRef={clickRef}
             {...cypressId('toolbar.uploadImage.input')}
           />
-        </ShowIf>
+        )}
       </ToolbarButton>
     </Fragment>
   )
diff --git a/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx b/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
index 5837f7976..bb49f0522 100644
--- a/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
+++ b/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
@@ -5,7 +5,6 @@
  */
 import { concatCssClasses } from '../../../../utils/concat-css-classes'
 import { UiIcon } from '../../../common/icons/ui-icon'
-import { ShowIf } from '../../../common/show-if/show-if'
 import type { SidebarEntryProps } from '../types'
 import styles from './sidebar-button.module.scss'
 import type { PropsWithChildren } from 'react'
@@ -51,11 +50,11 @@ export const SidebarButton: React.FC<PropsWithChildren<SidebarEntryProps>> = ({
         className={concatCssClasses(styles.button, className, { [styles.hide]: hide })}
         disabled={disabled}
         {...props}>
-        <ShowIf condition={!!icon}>
+        {icon !== undefined && (
           <span className={`sidebar-button-icon ${styles.icon}`}>
             <UiIcon icon={icon} />
           </span>
-        </ShowIf>
+        )}
         <span className={concatCssClasses(styles.text, { [styles.disabled]: disabled })}>{children}</span>
       </button>
     </OverlayTrigger>
diff --git a/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.tsx b/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.tsx
index f6aef3b04..9d907d736 100644
--- a/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.tsx
+++ b/frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.tsx
@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { UiIcon } from '../../../common/icons/ui-icon'
-import { ShowIf } from '../../../common/show-if/show-if'
 import styles from './sidebar-menu-info-entry.module.css'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
@@ -32,9 +31,7 @@ export const SidebarMenuInfoEntry: React.FC<PropsWithChildren<SidebarMenuInfoEnt
 
   return (
     <div className={`d-flex flex-row align-items-center p-1 ${styles['entry']}`}>
-      <ShowIf condition={icon !== undefined}>
-        <UiIcon icon={icon} className={'mx-2'} size={1.25} />
-      </ShowIf>
+      {icon !== undefined && <UiIcon icon={icon} className={'mx-2'} size={1.25} />}
       <div className={'d-flex flex-column px-1'}>
         <span className={styles['title']}>
           <Trans i18nKey={titleI18nKey} />
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx
index f093d8557..2702504b1 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx
@@ -10,7 +10,6 @@ import { useTranslatedText } from '../../../../../../hooks/common/use-translated
 import { updateMetadata } from '../../../../../../redux/note-details/methods'
 import { testId } from '../../../../../../utils/test-id'
 import { UiIcon } from '../../../../../common/icons/ui-icon'
-import { ShowIf } from '../../../../../common/show-if/show-if'
 import { useUiNotifications } from '../../../../../notifications/ui-notification-boundary'
 import React, { useCallback } from 'react'
 import { Button } from 'react-bootstrap'
@@ -51,7 +50,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
     <li className={'list-group-item d-flex flex-row justify-content-between align-items-center'}>
       {alias.name}
       <div>
-        <ShowIf condition={alias.primaryAlias}>
+        {alias.primaryAlias && (
           <Button
             className={'me-2 text-warning'}
             variant='light'
@@ -60,8 +59,8 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
             {...testId('aliasIsPrimary')}>
             <UiIcon icon={IconStar} />
           </Button>
-        </ShowIf>
-        <ShowIf condition={!alias.primaryAlias}>
+        )}
+        {!alias.primaryAlias && (
           <Button
             className={'me-2'}
             variant='light'
@@ -71,7 +70,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
             {...testId('aliasButtonMakePrimary')}>
             <UiIcon icon={IconStarFill} />
           </Button>
-        </ShowIf>
+        )}
         <Button
           variant='light'
           className={'text-danger'}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx
index da136afd0..4a24fb0a2 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx
@@ -5,7 +5,6 @@
  */
 import { cypressId } from '../../../../utils/cypress-attribute'
 import { FileContentFormat, readFile } from '../../../../utils/read-file'
-import { ShowIf } from '../../../common/show-if/show-if'
 import { UploadInput } from '../../../common/upload-input'
 import { useChangeEditorContentCallback } from '../../change-content-context/use-change-editor-content-callback'
 import { SidebarButton } from '../sidebar-button/sidebar-button'
@@ -54,14 +53,14 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
         disabled={!changeEditorContent}>
         <Trans i18nKey={'editor.import.file'} />
       </SidebarButton>
-      <ShowIf condition={!!changeEditorContent}>
+      {changeEditorContent !== undefined && (
         <UploadInput
           onLoad={onImportMarkdown}
           {...cypressId('menu-import-markdown-input')}
           allowedFileTypes={'.md, text/markdown, text/plain'}
           onClickRef={clickRef}
         />
-      </ShowIf>
+      )}
     </Fragment>
   )
 }
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx
index dea111f9e..8e9781c43 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx
@@ -5,7 +5,6 @@
  */
 import { useApplicationState } from '../../../../../../hooks/common/use-application-state'
 import { cypressId } from '../../../../../../utils/cypress-attribute'
-import { ShowIf } from '../../../../../common/show-if/show-if'
 import { useEditorReceiveHandler } from '../../../../../render-page/window-post-message-communicator/hooks/use-editor-receive-handler'
 import type { OnWordCountCalculatedMessage } from '../../../../../render-page/window-post-message-communicator/rendering-message'
 import { CommunicationMessageType } from '../../../../../render-page/window-post-message-communicator/rendering-message'
@@ -42,12 +41,8 @@ export const NoteInfoLineWordCount: React.FC<NoteInfoLineWordCountProps> = ({ vi
 
   return (
     <SidebarMenuInfoEntry titleI18nKey={'editor.noteInfo.wordCount'} icon={IconAlignStart}>
-      <ShowIf condition={wordCount === null}>
-        <Trans i18nKey={'common.loading'} />
-      </ShowIf>
-      <ShowIf condition={wordCount !== null}>
-        <span {...cypressId('document-info-word-count')}>{wordCount}</span>
-      </ShowIf>
+      {wordCount === null && <Trans i18nKey={'common.loading'} />}
+      {wordCount !== null && <span {...cypressId('document-info-word-count')}>{wordCount}</span>}
     </SidebarMenuInfoEntry>
   )
 }
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx
index f960a014b..ef7b6d640 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx
@@ -7,7 +7,6 @@ import { removeUserPermission, setUserPermission } from '../../../../../../api/p
 import { getUser } from '../../../../../../api/users'
 import { useApplicationState } from '../../../../../../hooks/common/use-application-state'
 import { setNotePermissionsFromServer } from '../../../../../../redux/note-details/methods'
-import { ShowIf } from '../../../../../common/show-if/show-if'
 import { UserAvatarForUser } from '../../../../../common/user-avatar/user-avatar-for-user'
 import { useUiNotifications } from '../../../../../notifications/ui-notification-boundary'
 import type { PermissionDisabledProps } from './permission-disabled.prop'
@@ -18,6 +17,7 @@ import React, { useCallback, useMemo } from 'react'
 import { useAsync } from 'react-use'
 import { PermissionInconsistentAlert } from './permission-inconsistent-alert'
 import { useGetSpecialPermissions } from './hooks/use-get-special-permissions'
+import { AsyncLoadingBoundary } from '../../../../../common/async-loading-boundary/async-loading-boundary'
 
 export interface PermissionEntryUserProps {
   entry: NoteUserPermissionEntry
@@ -87,7 +87,7 @@ export const PermissionEntryUser: React.FC<PermissionEntryUserProps & Permission
   }
 
   return (
-    <ShowIf condition={!loading && !error}>
+    <AsyncLoadingBoundary loading={loading} error={error} componentName={'PermissionEntryUser'}>
       <li className={'list-group-item d-flex flex-row justify-content-between align-items-center'}>
         <UserAvatarForUser user={value} />
         <div className={'d-flex flex-row align-items-center'}>
@@ -103,6 +103,6 @@ export const PermissionEntryUser: React.FC<PermissionEntryUserProps & Permission
           />
         </div>
       </li>
-    </ShowIf>
+    </AsyncLoadingBoundary>
   )
 }
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-list-entry.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-list-entry.tsx
index 468ebbb01..699554f2d 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-list-entry.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-list-entry.tsx
@@ -5,7 +5,6 @@
  */
 import type { RevisionMetadata } from '../../../../../../api/revisions/types'
 import { UiIcon } from '../../../../../common/icons/ui-icon'
-import { ShowIf } from '../../../../../common/show-if/show-if'
 import { UserAvatarForUser } from '../../../../../common/user-avatar/user-avatar-for-user'
 import { WaitSpinner } from '../../../../../common/wait-spinner/wait-spinner'
 import { useUiNotifications } from '../../../../../notifications/ui-notification-boundary'
@@ -72,10 +71,8 @@ export const RevisionListEntry: React.FC<RevisionListEntryProps> = ({ active, on
       </span>
       <span className={'d-flex flex-row my-1 align-items-center'}>
         <UiIcon icon={IconPerson} className={'mx-2'} />
-        <ShowIf condition={revisionAuthors.loading}>
-          <WaitSpinner />
-        </ShowIf>
-        <ShowIf condition={!revisionAuthors.error && !revisionAuthors.loading}>{revisionAuthors.value}</ShowIf>
+        {revisionAuthors.loading && <WaitSpinner />}
+        {!revisionAuthors.error && !revisionAuthors.loading && revisionAuthors.value}
       </span>
       <span>
         <UiIcon icon={IconPersonPlus} className='mx-2' />
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/share-modal.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/share-modal.tsx
index 248a83382..3ed1f2d99 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/share-modal.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/share-modal.tsx
@@ -6,7 +6,6 @@
 import { useApplicationState } from '../../../../../../hooks/common/use-application-state'
 import type { ModalVisibilityProps } from '../../../../../common/modals/common-modal'
 import { CommonModal } from '../../../../../common/modals/common-modal'
-import { ShowIf } from '../../../../../common/show-if/show-if'
 import { LinkType, NoteUrlField } from './note-url-field'
 import { NoteType } from '@hedgedoc/commons'
 import React from 'react'
@@ -32,14 +31,18 @@ export const ShareModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) =>
       <Modal.Body>
         <Trans i18nKey={'editor.modal.shareLink.editorDescription'} />
         <NoteUrlField type={LinkType.EDITOR} />
-        <ShowIf condition={noteFrontmatter.type === NoteType.SLIDE}>
-          <Trans i18nKey={'editor.modal.shareLink.slidesDescription'} />
-          <NoteUrlField type={LinkType.SLIDESHOW} />
-        </ShowIf>
-        <ShowIf condition={noteFrontmatter.type === NoteType.DOCUMENT}>
-          <Trans i18nKey={'editor.modal.shareLink.viewOnlyDescription'} />
-          <NoteUrlField type={LinkType.DOCUMENT} />
-        </ShowIf>
+        {noteFrontmatter.type === NoteType.SLIDE && (
+          <>
+            <Trans i18nKey={'editor.modal.shareLink.slidesDescription'} />
+            <NoteUrlField type={LinkType.SLIDESHOW} />
+          </>
+        )}
+        {noteFrontmatter.type === NoteType.DOCUMENT && (
+          <>
+            <Trans i18nKey={'editor.modal.shareLink.viewOnlyDescription'} />
+            <NoteUrlField type={LinkType.DOCUMENT} />
+          </>
+        )}
       </Modal.Body>
     </CommonModal>
   )
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx
index 29340dcfd..e06a67576 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx
@@ -10,7 +10,6 @@ import { ActiveIndicator } from '../active-indicator'
 import styles from './user-line.module.scss'
 import React, { useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { ShowIf } from '../../../../../common/show-if/show-if'
 import { Incognito as IconIncognito } from 'react-bootstrap-icons'
 import { useTranslatedText } from '../../../../../../hooks/common/use-translated-text'
 
@@ -48,9 +47,7 @@ export const UserLine: React.FC<UserLineProps> = ({ username, displayName, activ
       <div className={`${styles['user-line-color-indicator']} ${createCursorCssClass(color)}`} />
       {avatar}
       <div className={'ms-auto d-flex align-items-center gap-1 h-100'}>
-        <ShowIf condition={!username}>
-          <IconIncognito title={guestUserTitle} size={'16px'} className={'text-muted'} />
-        </ShowIf>
+        {!username && <IconIncognito title={guestUserTitle} size={'16px'} className={'text-muted'} />}
         {own ? (
           <span className={'px-1'}>
             <Trans i18nKey={'editor.onlineStatus.you'}></Trans>
diff --git a/frontend/src/components/editor-page/splitter/splitter.tsx b/frontend/src/components/editor-page/splitter/splitter.tsx
index 7469af408..5dbda2173 100644
--- a/frontend/src/components/editor-page/splitter/splitter.tsx
+++ b/frontend/src/components/editor-page/splitter/splitter.tsx
@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../../common/show-if/show-if'
 import { useKeyboardShortcuts } from './hooks/use-keyboard-shortcuts'
 import { DividerButtonsShift, SplitDivider } from './split-divider/split-divider'
 import styles from './splitter.module.scss'
@@ -140,7 +139,7 @@ export const Splitter: React.FC<SplitterProps> = ({ additionalContainerClassName
       className={`flex-fill flex-row d-flex ${additionalContainerClassName || ''}${
         resizingInProgress ? ' ' + styles.resizing : ''
       }`}>
-      <ShowIf condition={resizingInProgress}>
+      {resizingInProgress && (
         <div
           className={styles['move-overlay']}
           onTouchMove={onMove}
@@ -148,7 +147,7 @@ export const Splitter: React.FC<SplitterProps> = ({ additionalContainerClassName
           onTouchCancel={onStopResizing}
           onTouchEnd={onStopResizing}
           onMouseUp={onStopResizing}></div>
-      </ShowIf>
+      )}
       <div className={styles['left']} style={{ width: `calc(${adjustedRelativeSplitValue}% - 5px)` }}>
         <div className={styles['inner']}>{left}</div>
       </div>
diff --git a/frontend/src/components/editor-page/table-of-contents/table-of-contents.tsx b/frontend/src/components/editor-page/table-of-contents/table-of-contents.tsx
index 3005bc4bb..d1d285037 100644
--- a/frontend/src/components/editor-page/table-of-contents/table-of-contents.tsx
+++ b/frontend/src/components/editor-page/table-of-contents/table-of-contents.tsx
@@ -1,10 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { concatCssClasses } from '../../../utils/concat-css-classes'
-import { ShowIf } from '../../common/show-if/show-if'
 import styles from './table-of-contents.module.scss'
 import { useBuildReactDomFromTocAst } from './use-build-react-dom-from-toc-ast'
 import type { TocAst } from '@hedgedoc/markdown-it-plugins'
@@ -32,9 +31,7 @@ export const TableOfContents: React.FC<TableOfContentsProps> = ({ ast, maxDepth
 
   return (
     <div className={concatCssClasses(styles.toc, className)}>
-      <ShowIf condition={ast.children.length === 0}>
-        <Trans i18nKey={'editor.infoToc'} />
-      </ShowIf>
+      {ast.children.length === 0 && <Trans i18nKey={'editor.infoToc'} />}
       {tocTree}
     </div>
   )
diff --git a/frontend/src/components/editor-page/table-of-contents/use-build-react-dom-from-toc-ast.tsx b/frontend/src/components/editor-page/table-of-contents/use-build-react-dom-from-toc-ast.tsx
index f9bc821b8..5c7e854d0 100644
--- a/frontend/src/components/editor-page/table-of-contents/use-build-react-dom-from-toc-ast.tsx
+++ b/frontend/src/components/editor-page/table-of-contents/use-build-react-dom-from-toc-ast.tsx
@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../../common/show-if/show-if'
 import { JumpAnchor } from '../../markdown-renderer/extensions/link-replacer/jump-anchor'
 import { tocSlugify } from './toc-slugify'
 import type { TocAst } from '@hedgedoc/markdown-it-plugins'
@@ -42,14 +41,12 @@ const buildReactDomFromTocAst = (
 
   return (
     <Fragment>
-      <ShowIf condition={toc.level > 0}>
+      {toc.level > 0 && (
         <JumpAnchor href={headlineUrl} title={rawName} jumpTargetId={slug.slice(1)}>
           {rawName}
         </JumpAnchor>
-      </ShowIf>
-      <ShowIf condition={children.length > 0}>
-        <ul>{children}</ul>
-      </ShowIf>
+      )}
+      {children.length > 0 && <ul>{children}</ul>}
     </Fragment>
   )
 }
diff --git a/frontend/src/components/error-pages/common-error-page.tsx b/frontend/src/components/error-pages/common-error-page.tsx
index 69711b726..8dbdf19af 100644
--- a/frontend/src/components/error-pages/common-error-page.tsx
+++ b/frontend/src/components/error-pages/common-error-page.tsx
@@ -4,7 +4,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../common/show-if/show-if'
 import { LandingLayout } from '../landing-layout/landing-layout'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
@@ -35,11 +34,11 @@ export const CommonErrorPage: React.FC<PropsWithChildren<CommonErrorPageProps>>
         <h1>
           <Trans i18nKey={titleI18nKey} />
         </h1>
-        <ShowIf condition={!!descriptionI18nKey}>
+        {descriptionI18nKey !== undefined && (
           <h3>
             <Trans i18nKey={descriptionI18nKey} />
           </h3>
-        </ShowIf>
+        )}
         {children}
       </div>
     </LandingLayout>
diff --git a/frontend/src/components/global-dialogs/shortcuts-modal/shortcut-line.tsx b/frontend/src/components/global-dialogs/shortcuts-modal/shortcut-line.tsx
index 3ae02c853..ebdb7526f 100644
--- a/frontend/src/components/global-dialogs/shortcuts-modal/shortcut-line.tsx
+++ b/frontend/src/components/global-dialogs/shortcuts-modal/shortcut-line.tsx
@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../../common/show-if/show-if'
 import { AltKey } from './alt-key'
 import { ModifierKey } from './modifier-key'
 import React from 'react'
@@ -39,15 +38,19 @@ export const ShortcutLine: React.FC<ShortcutLineProps> = ({
         <Trans i18nKey={functionNameI18nKey} />
       </span>
       <span>
-        <ShowIf condition={showModifierKey}>
-          <ModifierKey />
-          <span> + </span>
-        </ShowIf>
+        {showModifierKey && (
+          <>
+            <ModifierKey />
+            <span> + </span>
+          </>
+        )}
 
-        <ShowIf condition={showAltKey}>
-          <AltKey />
-          <span> + </span>
-        </ShowIf>
+        {showAltKey && (
+          <>
+            <AltKey />
+            <span> + </span>
+          </>
+        )}
 
         <kbd>{functionKeyCode.toUpperCase()}</kbd>
       </span>
diff --git a/frontend/src/components/global-dialogs/version-info-modal/version-info-modal.tsx b/frontend/src/components/global-dialogs/version-info-modal/version-info-modal.tsx
index 56611b440..e179673b8 100644
--- a/frontend/src/components/global-dialogs/version-info-modal/version-info-modal.tsx
+++ b/frontend/src/components/global-dialogs/version-info-modal/version-info-modal.tsx
@@ -11,7 +11,6 @@ import { useFrontendConfig } from '../../common/frontend-config-context/use-fron
 import { TranslatedExternalLink } from '../../common/links/translated-external-link'
 import type { CommonModalProps } from '../../common/modals/common-modal'
 import { CommonModal } from '../../common/modals/common-modal'
-import { ShowIf } from '../../common/show-if/show-if'
 import React, { useMemo } from 'react'
 import { Modal } from 'react-bootstrap'
 
@@ -46,20 +45,20 @@ export const VersionInfoModal: React.FC<CommonModalProps> = ({ onHide, show }) =
       <Modal.Body>
         <CopyableField content={backendVersion} />
         <div className='d-flex justify-content-between mt-3'>
-          <ShowIf condition={!!links.sourceCode}>
+          {links.sourceCode !== undefined && (
             <TranslatedExternalLink
               i18nKey={'landing.versionInfo.sourceCode'}
               className={'btn btn-primary d-block mb-2'}
               href={links.sourceCode}
             />
-          </ShowIf>
-          <ShowIf condition={!!links.issues}>
+          )}
+          {links.issues !== undefined && (
             <TranslatedExternalLink
               i18nKey={'landing.versionInfo.issueTracker'}
               className={'btn btn-primary d-block mb-2'}
               href={links.issues}
             />
-          </ShowIf>
+          )}
         </div>
       </Modal.Body>
     </CommonModal>
diff --git a/frontend/src/components/history-page/entry-menu/entry-menu.tsx b/frontend/src/components/history-page/entry-menu/entry-menu.tsx
index 6b7c62275..f591e3f2a 100644
--- a/frontend/src/components/history-page/entry-menu/entry-menu.tsx
+++ b/frontend/src/components/history-page/entry-menu/entry-menu.tsx
@@ -6,7 +6,6 @@
 import { HistoryEntryOrigin } from '../../../api/history/types'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { UiIcon } from '../../common/icons/ui-icon'
-import { ShowIf } from '../../common/show-if/show-if'
 import { DeleteNoteItem } from './delete-note-item'
 import styles from './entry-menu.module.scss'
 import { RemoveNoteEntryItem } from './remove-note-entry-item'
@@ -60,27 +59,29 @@ export const EntryMenu: React.FC<EntryMenuProps> = ({
           <Trans i18nKey='landing.history.menu.recentNotes' />
         </Dropdown.Header>
 
-        <ShowIf condition={origin === HistoryEntryOrigin.LOCAL}>
+        {origin === HistoryEntryOrigin.LOCAL && (
           <Dropdown.Item disabled>
             <UiIcon icon={IconLaptop} className='mx-2' />
             <Trans i18nKey='landing.history.menu.entryLocal' />
           </Dropdown.Item>
-        </ShowIf>
+        )}
 
-        <ShowIf condition={origin === HistoryEntryOrigin.REMOTE}>
+        {origin === HistoryEntryOrigin.REMOTE && (
           <Dropdown.Item disabled>
             <UiIcon icon={IconCloud} className='mx-2' />
             <Trans i18nKey='landing.history.menu.entryRemote' />
           </Dropdown.Item>
-        </ShowIf>
+        )}
 
         <RemoveNoteEntryItem onConfirm={onRemoveFromHistory} noteTitle={title} />
 
         {/* TODO Check permissions (ownership) before showing option for delete  (https://github.com/hedgedoc/hedgedoc/issues/5036)*/}
-        <ShowIf condition={userExists}>
-          <Dropdown.Divider />
-          <DeleteNoteItem onConfirm={onDeleteNote} noteTitle={title} />
-        </ShowIf>
+        {userExists && (
+          <>
+            <Dropdown.Divider />
+            <DeleteNoteItem onConfirm={onDeleteNote} noteTitle={title} />
+          </>
+        )}
       </Dropdown.Menu>
     </Dropdown>
   )
diff --git a/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx b/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx
index fef41f802..aea54fa37 100644
--- a/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx
+++ b/frontend/src/components/history-page/history-toolbar/history-toolbar.tsx
@@ -8,7 +8,6 @@ import { useApplicationState } from '../../../hooks/common/use-application-state
 import { useTranslatedText } from '../../../hooks/common/use-translated-text'
 import { importHistoryEntries, setHistoryEntries } from '../../../redux/history/methods'
 import { UiIcon } from '../../common/icons/ui-icon'
-import { ShowIf } from '../../common/show-if/show-if'
 import { useUiNotifications } from '../../notifications/ui-notification-boundary'
 import { ClearHistoryButton } from './clear-history-button'
 import { ExportHistoryButton } from './export-history-button'
@@ -89,13 +88,13 @@ export const HistoryToolbar: React.FC = () => {
       <div className={'me-1 mb-1'}>
         <HistoryRefreshButton />
       </div>
-      <ShowIf condition={userExists}>
+      {userExists && (
         <div className={'me-1 mb-1'}>
           <Button variant={'secondary'} title={uploadAllButtonTitle} onClick={onUploadAllToRemote}>
             <UiIcon icon={IconCloudUpload} />
           </Button>
         </div>
-      </ShowIf>
+      )}
       <div className={'me-1 mb-1'}>
         <HistoryViewModeToggleButton />
       </div>
diff --git a/frontend/src/components/intro-page/intro-custom-content.tsx b/frontend/src/components/intro-page/intro-custom-content.tsx
index 13229b674..3de0c4fa6 100644
--- a/frontend/src/components/intro-page/intro-custom-content.tsx
+++ b/frontend/src/components/intro-page/intro-custom-content.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -29,7 +29,7 @@ export const IntroCustomContent: React.FC = () => {
     <AsyncLoadingBoundary loading={loading || !value} error={error} componentName={'custom intro content'}>
       <RendererIframe
         frameClasses={'w-100 overflow-y-hidden'}
-        markdownContentLines={value as string[]}
+        markdownContentLines={value ?? []}
         rendererType={RendererType.SIMPLE}
         adaptFrameHeightToContent={true}
         showWaitSpinner={true}
diff --git a/frontend/src/components/landing-layout/navigation/sign-in-button.tsx b/frontend/src/components/landing-layout/navigation/sign-in-button.tsx
index e76f5be12..4d59c541d 100644
--- a/frontend/src/components/landing-layout/navigation/sign-in-button.tsx
+++ b/frontend/src/components/landing-layout/navigation/sign-in-button.tsx
@@ -6,7 +6,6 @@
 import { useTranslatedText } from '../../../hooks/common/use-translated-text'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { useFrontendConfig } from '../../common/frontend-config-context/use-frontend-config'
-import { ShowIf } from '../../common/show-if/show-if'
 import Link from 'next/link'
 import React, { useMemo } from 'react'
 import { Button } from 'react-bootstrap'
@@ -39,13 +38,15 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
   }, [authProviders, pathname])
   const buttonTitle = useTranslatedText('login.signIn')
 
+  if (authProviders.length === 0) {
+    return null
+  }
+
   return (
-    <ShowIf condition={authProviders.length > 0}>
-      <Link href={loginLink} passHref={true}>
-        <Button title={buttonTitle} {...cypressId('sign-in-button')} variant={variant || 'success'} {...props}>
-          <Trans i18nKey='login.signIn' />
-        </Button>
-      </Link>
-    </ShowIf>
+    <Link href={loginLink} passHref={true}>
+      <Button title={buttonTitle} {...cypressId('sign-in-button')} variant={variant || 'success'} {...props}>
+        <Trans i18nKey='login.signIn' />
+      </Button>
+    </Link>
   )
 }
diff --git a/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/submenues/legal-submenu.tsx b/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/submenues/legal-submenu.tsx
index b9ee33b8b..ef1984e58 100644
--- a/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/submenues/legal-submenu.tsx
+++ b/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/submenues/legal-submenu.tsx
@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../../../../../common/show-if/show-if'
 import { DropdownHeader } from '../dropdown-header'
 import { TranslatedDropdownItem } from '../translated-dropdown-item'
 import type { ReactElement } from 'react'
@@ -29,15 +28,15 @@ export const LegalSubmenu: React.FC = (): null | ReactElement => {
     <Fragment>
       <Dropdown.Divider />
       <DropdownHeader i18nKey={'appbar.help.legal.header'} />
-      <ShowIf condition={!!specialUrls.privacy}>
+      {specialUrls.privacy !== undefined && (
         <TranslatedDropdownItem href={specialUrls.privacy} i18nKey={'appbar.help.legal.privacy'} />
-      </ShowIf>
-      <ShowIf condition={!!specialUrls.termsOfUse}>
+      )}
+      {specialUrls.termsOfUse !== undefined && (
         <TranslatedDropdownItem href={specialUrls.termsOfUse} i18nKey={'appbar.help.legal.termsOfUse'} />
-      </ShowIf>
-      <ShowIf condition={!!specialUrls.imprint}>
+      )}
+      {specialUrls.imprint !== undefined && (
         <TranslatedDropdownItem href={specialUrls.imprint} i18nKey={'appbar.help.legal.imprint'} />
-      </ShowIf>
+      )}
     </Fragment>
   )
 }
diff --git a/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/translated-dropdown-item.tsx b/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/translated-dropdown-item.tsx
index fdf0e26ec..c04d8b715 100644
--- a/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/translated-dropdown-item.tsx
+++ b/frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/translated-dropdown-item.tsx
@@ -5,7 +5,6 @@
  */
 import { useTranslatedText } from '../../../../../hooks/common/use-translated-text'
 import { UiIcon } from '../../../../common/icons/ui-icon'
-import { ShowIf } from '../../../../common/show-if/show-if'
 import type { TOptions } from 'i18next'
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
@@ -36,9 +35,7 @@ export const TranslatedDropdownItem: React.FC<TranslatedDropdownItemProps> = ({
 
   return (
     <Dropdown.Item {...props} title={title} className={'d-flex align-items-center'}>
-      <ShowIf condition={!!icon}>
-        <UiIcon icon={icon} className={'me-2'} />
-      </ShowIf>
+      {icon !== undefined && <UiIcon icon={icon} className={'me-2'} />}
       <span>{title}</span>
     </Dropdown.Item>
   )
diff --git a/frontend/src/components/layout/app-bar/app-bar-elements/note-title-element/note-title-element.tsx b/frontend/src/components/layout/app-bar/app-bar-elements/note-title-element/note-title-element.tsx
index 38f224986..526f1f5d6 100644
--- a/frontend/src/components/layout/app-bar/app-bar-elements/note-title-element/note-title-element.tsx
+++ b/frontend/src/components/layout/app-bar/app-bar-elements/note-title-element/note-title-element.tsx
@@ -9,7 +9,6 @@ import { useMayEdit } from '../../../../../hooks/common/use-may-edit'
 import { useNoteTitle } from '../../../../../hooks/common/use-note-title'
 import { useTranslatedText } from '../../../../../hooks/common/use-translated-text'
 import { UiIcon } from '../../../../common/icons/ui-icon'
-import { ShowIf } from '../../../../common/show-if/show-if'
 import React from 'react'
 import { Lock as IconLock } from 'react-bootstrap-icons'
 
@@ -23,11 +22,11 @@ export const NoteTitleElement: React.FC = () => {
 
   return (
     <span className={'m-0 text-truncate'}>
-      <ShowIf condition={!isWriteable}>
+      {!isWriteable && (
         <span className={'text-secondary me-2'}>
           <UiIcon icon={IconLock} className={'me-2'} title={readOnlyLabel} />
         </span>
-      </ShowIf>
+      )}
       {noteTitle}
     </span>
   )
diff --git a/frontend/src/components/login-page/guest/guest-card.tsx b/frontend/src/components/login-page/guest/guest-card.tsx
index b98330350..2ca30d3bc 100644
--- a/frontend/src/components/login-page/guest/guest-card.tsx
+++ b/frontend/src/components/login-page/guest/guest-card.tsx
@@ -11,7 +11,6 @@ import { HistoryButton } from '../../layout/app-bar/app-bar-elements/help-dropdo
 import { useFrontendConfig } from '../../common/frontend-config-context/use-frontend-config'
 import { Trans, useTranslation } from 'react-i18next'
 import { GuestAccessLevel } from '../../../api/config/types'
-import { ShowIf } from '../../common/show-if/show-if'
 
 /**
  * Renders the card with the options for not logged-in users.
@@ -35,11 +34,11 @@ export const GuestCard: React.FC = () => {
           <NewNoteButton />
           <HistoryButton />
         </div>
-        <ShowIf condition={guestAccessLevel !== GuestAccessLevel.CREATE}>
+        {guestAccessLevel !== GuestAccessLevel.CREATE && (
           <div className={'text-muted mt-2 small'}>
             <Trans i18nKey={'login.guest.noteCreationDisabled'} />
           </div>
-        </ShowIf>
+        )}
       </Card.Body>
     </Card>
   )
diff --git a/frontend/src/components/login-page/local-login/local-login-card.tsx b/frontend/src/components/login-page/local-login/local-login-card.tsx
index 0f6e03353..fb54c8066 100644
--- a/frontend/src/components/login-page/local-login/local-login-card.tsx
+++ b/frontend/src/components/login-page/local-login/local-login-card.tsx
@@ -10,7 +10,6 @@ import { useFrontendConfig } from '../../common/frontend-config-context/use-fron
 import { AuthProviderType } from '../../../api/config/types'
 import { LocalLoginCardBody } from './local-login-card-body'
 import { LocalRegisterCardBody } from './register/local-register-card-body'
-import { ShowIf } from '../../common/show-if/show-if'
 
 /**
  * Shows the card that processes local logins and registers.
@@ -29,10 +28,12 @@ export const LocalLoginCard: React.FC = () => {
   return (
     <Card>
       <LocalLoginCardBody />
-      <ShowIf condition={frontendConfig.allowRegister}>
-        <hr className={'m-0'} />
-        <LocalRegisterCardBody />
-      </ShowIf>
+      {frontendConfig.allowRegister && (
+        <>
+          <hr className={'m-0'} />
+          <LocalRegisterCardBody />
+        </>
+      )}
     </Card>
   )
 }
diff --git a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
index 92bddd98a..37755daf3 100644
--- a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
+++ b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
@@ -1,12 +1,11 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
 import { cypressId } from '../../../../utils/cypress-attribute'
 import { Logger } from '../../../../utils/logger'
-import { ShowIf } from '../../../common/show-if/show-if'
 import { ProxyImageFrame } from '../../extensions/image/proxy-image-frame'
 import styles from './click-shield.module.scss'
 import type { Property } from 'csstype'
@@ -113,20 +112,25 @@ export const ClickShield: React.FC<ClickShieldProps> = ({
     [hoverIcon]
   )
 
+  if (showChildren) {
+    return (
+      <span className={containerClassName} {...cypressId(props['data-cypress-id'])}>
+        {children}
+      </span>
+    )
+  }
+
   return (
     <span className={containerClassName} {...cypressId(props['data-cypress-id'])}>
-      <ShowIf condition={showChildren}>{children}</ShowIf>
-      <ShowIf condition={!showChildren}>
-        <span className={`${styles['click-shield']} d-inline-block ratio ratio-16x9`} onClick={doShowChildren}>
-          {previewBackground}
-          <span className={`${styles['preview-hover']}`}>
-            <span>
-              <Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
-            </span>
-            {icon}
+      <span className={`${styles['click-shield']} d-inline-block ratio ratio-16x9`} onClick={doShowChildren}>
+        {previewBackground}
+        <span className={`${styles['preview-hover']}`}>
+          <span>
+            <Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
           </span>
+          {icon}
         </span>
-      </ShowIf>
+      </span>
     </span>
   )
 }
diff --git a/frontend/src/components/notifications/ui-notification-toast.tsx b/frontend/src/components/notifications/ui-notification-toast.tsx
index 13198438c..9d52c9b53 100644
--- a/frontend/src/components/notifications/ui-notification-toast.tsx
+++ b/frontend/src/components/notifications/ui-notification-toast.tsx
@@ -6,7 +6,6 @@
 import { cypressId } from '../../utils/cypress-attribute'
 import { Logger } from '../../utils/logger'
 import { UiIcon } from '../common/icons/ui-icon'
-import { ShowIf } from '../common/show-if/show-if'
 import styles from './notifications.module.scss'
 import type { UiNotification } from './types'
 import { useUiNotifications } from './ui-notification-boundary'
@@ -106,9 +105,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({ notificatio
       {...cypressId('notification-toast')}>
       <Toast.Header>
         <strong className='me-auto'>
-          <ShowIf condition={!!notification.icon}>
-            <UiIcon icon={notification.icon} className={'me-1'} />
-          </ShowIf>
+          {notification.icon !== undefined && <UiIcon icon={notification.icon} className={'me-1'} />}
           <Trans i18nKey={notification.titleI18nKey} tOptions={notification.titleI18nOptions} />
         </strong>
         <small>{formattedCreatedAtDate}</small>
diff --git a/frontend/src/components/profile-page/access-tokens/profile-access-tokens.tsx b/frontend/src/components/profile-page/access-tokens/profile-access-tokens.tsx
index ad266eb8c..94116eb56 100644
--- a/frontend/src/components/profile-page/access-tokens/profile-access-tokens.tsx
+++ b/frontend/src/components/profile-page/access-tokens/profile-access-tokens.tsx
@@ -1,11 +1,10 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { getAccessTokenList } from '../../../api/tokens'
 import type { AccessToken } from '../../../api/tokens/types'
-import { ShowIf } from '../../common/show-if/show-if'
 import { useUiNotifications } from '../../notifications/ui-notification-boundary'
 import { AccessTokenCreationForm } from './access-token-creation-form/access-token-creation-form'
 import { AccessTokenListEntry } from './access-token-list-entry'
@@ -58,14 +57,10 @@ export const ProfileAccessTokens: React.FC = () => {
           <Trans i18nKey='profile.accessTokens.infoDev' />
         </p>
         <hr />
-        <ShowIf condition={accessTokens.length === 0}>
-          <Trans i18nKey='profile.accessTokens.noTokens' />
-        </ShowIf>
+        {accessTokens.length === 0 && <Trans i18nKey='profile.accessTokens.noTokens' />}
         <ListGroup>{tokensDom}</ListGroup>
         <hr />
-        <ShowIf condition={accessTokens.length < 200}>
-          <AccessTokenCreationForm onUpdateList={refreshAccessTokens} />
-        </ShowIf>
+        {accessTokens.length < 200 && <AccessTokenCreationForm onUpdateList={refreshAccessTokens} />}
       </Card.Body>
     </Card>
   )
diff --git a/frontend/src/components/register-page/register-infos.tsx b/frontend/src/components/register-page/register-infos.tsx
index 290e62058..a6f73fcec 100644
--- a/frontend/src/components/register-page/register-infos.tsx
+++ b/frontend/src/components/register-page/register-infos.tsx
@@ -5,7 +5,6 @@
  */
 import { useFrontendConfig } from '../common/frontend-config-context/use-frontend-config'
 import { TranslatedExternalLink } from '../common/links/translated-external-link'
-import { ShowIf } from '../common/show-if/show-if'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
@@ -16,21 +15,25 @@ export const RegisterInfos: React.FC = () => {
   useTranslation()
   const specialUrls = useFrontendConfig().specialUrls
 
+  if (specialUrls.termsOfUse === undefined && specialUrls.privacy === undefined) {
+    return null
+  }
+
   return (
-    <ShowIf condition={!!specialUrls.termsOfUse || !!specialUrls.privacy}>
+    <>
       <Trans i18nKey='login.register.infoTermsPrivacy' />
       <ul>
-        <ShowIf condition={!!specialUrls.termsOfUse}>
+        {specialUrls.termsOfUse !== undefined && (
           <li>
             <TranslatedExternalLink i18nKey='appbar.help.legal.termsOfUse' href={specialUrls.termsOfUse ?? ''} />
           </li>
-        </ShowIf>
-        <ShowIf condition={!!specialUrls.privacy}>
+        )}
+        {specialUrls.privacy !== undefined && (
           <li>
             <TranslatedExternalLink i18nKey='appbar.help.legal.privacy' href={specialUrls.privacy ?? ''} />
           </li>
-        </ShowIf>
+        )}
       </ul>
-    </ShowIf>
+    </>
   )
 }
diff --git a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
index 8907947dd..17c091742 100644
--- a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
+++ b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
@@ -1,10 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { TableOfContentsMarkdownExtension } from '../../../../extensions/essential-app-extensions/table-of-contents/table-of-contents-markdown-extension'
-import { ShowIf } from '../../../common/show-if/show-if'
 import { useExtensionEventEmitterHandler } from '../../../markdown-renderer/hooks/use-extension-event-emitter'
 import styles from './markdown-document.module.scss'
 import { WidthBasedTableOfContents } from './width-based-table-of-contents'
@@ -22,9 +21,7 @@ export const DocumentTocSidebar: React.FC<DocumentTocSidebarProps> = ({ width, b
 
   return (
     <div className={styles.side}>
-      <ShowIf condition={!!tocAst}>
-        <WidthBasedTableOfContents tocAst={tocAst as TocAst} baseUrl={baseUrl} width={width} />
-      </ShowIf>
+      {tocAst !== undefined && <WidthBasedTableOfContents tocAst={tocAst} baseUrl={baseUrl} width={width} />}
     </div>
   )
 }
diff --git a/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx b/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx
index 89cc0a8ad..f8f50ba5f 100644
--- a/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx
@@ -1,10 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary'
-import { ShowIf } from '../../../components/common/show-if/show-if'
 import { WaitSpinner } from '../../../components/common/wait-spinner/wait-spinner'
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
 import { useEffectWithCatch } from '../../../hooks/common/use-effect-with-catch'
@@ -49,9 +48,9 @@ export const AbcFrame: React.FC<CodeProps> = ({ code }) => {
 
   return (
     <AsyncLoadingBoundary loading={loading || !abcLib} error={!!loadingError} componentName={'abc.js'}>
-      <ShowIf condition={!!renderError}>
+      {renderError !== undefined && (
         <TranslatedApplicationErrorAlert errorI18nKey={'editor.embeddings.abcJs.errorWhileRendering'} />
-      </ShowIf>
+      )}
       <div
         ref={container}
         className={`${styles['abcjs-score']} bg-white text-black svg-container`}
diff --git a/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx b/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx
index a08b7c085..90a802bc4 100644
--- a/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx
@@ -1,11 +1,10 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import fontStyles from '../../../../global-styles/variables.module.scss'
 import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary'
-import { ShowIf } from '../../../components/common/show-if/show-if'
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
 import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
 import { Logger } from '../../../utils/logger'
@@ -71,9 +70,7 @@ export const FlowChart: React.FC<CodeProps> = ({ code }) => {
 
   return (
     <AsyncLoadingBoundary loading={loading || !flowchartLib} componentName={'flowchart.js'} error={!!libLoadingError}>
-      <ShowIf condition={syntaxError}>
-        <TranslatedApplicationErrorAlert errorI18nKey={'renderer.flowchart.invalidSyntax'} />
-      </ShowIf>
+      {syntaxError && <TranslatedApplicationErrorAlert errorI18nKey={'renderer.flowchart.invalidSyntax'} />}
       <div ref={diagramRef} {...testId('flowchart')} className={'text-center'} />
     </AsyncLoadingBoundary>
   )
diff --git a/frontend/src/extensions/external-lib-app-extensions/graphviz/graphviz-frame.tsx b/frontend/src/extensions/external-lib-app-extensions/graphviz/graphviz-frame.tsx
index 9544da45f..fba9b3bfe 100644
--- a/frontend/src/extensions/external-lib-app-extensions/graphviz/graphviz-frame.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/graphviz/graphviz-frame.tsx
@@ -1,10 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary'
-import { ShowIf } from '../../../components/common/show-if/show-if'
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
@@ -59,9 +58,7 @@ export const GraphvizFrame: React.FC<CodeProps> = ({ code }) => {
 
   return (
     <AsyncLoadingBoundary loading={isLibLoading || !graphvizImport} componentName={'graphviz'} error={libLoadingError}>
-      <ShowIf condition={!!error}>
-        <ApplicationErrorAlert className={'text-wrap'}>{error}</ApplicationErrorAlert>
-      </ShowIf>
+      {error !== undefined && <ApplicationErrorAlert className={'text-wrap'}>{error}</ApplicationErrorAlert>}
       <div className={'svg-container'} {...cypressId('graphviz')} ref={container} />
     </AsyncLoadingBoundary>
   )
diff --git a/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx b/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx
index df229050d..36a899c4e 100644
--- a/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx
@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ShowIf } from '../../../components/common/show-if/show-if'
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
@@ -65,9 +64,7 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
 
   return (
     <Fragment>
-      <ShowIf condition={!!error}>
-        <ApplicationErrorAlert className={'text-wrap'}>{error?.message}</ApplicationErrorAlert>
-      </ShowIf>
+      {error !== undefined && <ApplicationErrorAlert className={'text-wrap'}>{error?.message}</ApplicationErrorAlert>}
       <div
         {...cypressId('mermaid-frame')}
         className={`text-center ${styles['mermaid']} bg-dark text-black`}
diff --git a/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx b/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx
index 0bce2588e..1bca388a9 100644
--- a/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-chart.tsx
@@ -1,10 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary'
-import { ShowIf } from '../../../components/common/show-if/show-if'
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
 import { Logger } from '../../../utils/logger'
 import React, { useEffect, useRef } from 'react'
@@ -59,9 +58,9 @@ export const VegaLiteChart: React.FC<CodeProps> = ({ code }) => {
 
   return (
     <AsyncLoadingBoundary loading={libLoading || !vegaEmbed} error={libLoadingError} componentName={'Vega Lite'}>
-      <ShowIf condition={!!renderingError}>
+      {renderingError !== undefined && (
         <TranslatedApplicationErrorAlert errorI18nKey={'renderer.vega-lite.errorJson'} />
-      </ShowIf>
+      )}
       <div className={'text-center'}>
         <div ref={diagramContainer} />
       </div>