diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx
index 5dffcc6b..198162bd 100644
--- a/commafeed-client/src/App.tsx
+++ b/commafeed-client/src/App.tsx
@@ -12,6 +12,7 @@ import { DisablePullToRefresh } from "components/DisablePullToRefresh"
import { ErrorBoundary } from "components/ErrorBoundary"
import { Header } from "components/header/Header"
import { Tree } from "components/sidebar/Tree"
+import { useAppLoading } from "hooks/useAppLoading"
import { useBrowserExtension } from "hooks/useBrowserExtension"
import { useI18n } from "i18n"
import { WelcomePage } from "pages/WelcomePage"
@@ -29,7 +30,7 @@ import { TagDetailsPage } from "pages/app/TagDetailsPage"
import { LoginPage } from "pages/auth/LoginPage"
import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
import { RegistrationPage } from "pages/auth/RegistrationPage"
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
import { isSafari } from "react-device-detect"
import ReactGA from "react-ga4"
import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"
@@ -169,6 +170,38 @@ function BrowserExtensionBadgeUnreadCountHandler() {
return null
}
+function CustomJsHandler() {
+ const [scriptLoaded, setScriptLoaded] = useState(false)
+ const { loading } = useAppLoading()
+
+ useEffect(() => {
+ if (scriptLoaded || loading) {
+ return
+ }
+
+ const script = document.createElement("script")
+ script.src = "custom_js.js"
+ script.async = true
+ document.body.appendChild(script)
+
+ setScriptLoaded(true)
+ }, [scriptLoaded, loading])
+
+ return null
+}
+
+function CustomCssHandler() {
+ useEffect(() => {
+ const link = document.createElement("link")
+ link.rel = "stylesheet"
+ link.type = "text/css"
+ link.href = "custom_css.css"
+ document.head.appendChild(link)
+ }, [])
+
+ return null
+}
+
export function App() {
useI18n()
const root = useAppSelector(state => state.tree.rootCategory)
@@ -188,14 +221,18 @@ export function App() {
+
+
{/* disable pull-to-refresh as it messes with vertical scrolling
safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers
https://github.com/Athou/commafeed/issues/1168
*/}
{!isSafari && }
+
+
>
diff --git a/commafeed-client/vite.config.ts b/commafeed-client/vite.config.ts
index accae95e..ecc6bfce 100644
--- a/commafeed-client/vite.config.ts
+++ b/commafeed-client/vite.config.ts
@@ -8,7 +8,6 @@ import tsconfigPaths from "vite-tsconfig-paths"
// https://vitejs.dev/config/
export default defineConfig(() => ({
plugins: [
- customCodeInjector,
react({
babel: {
plugins: ["@lingui/babel-plugin-lingui-macro"],
@@ -57,30 +56,3 @@ export default defineConfig(() => ({
setupFiles: "./src/setupTests.ts",
},
}))
-
-// inject custom js and css links in html
-const customCodeInjector: PluginOption = {
- name: "customCodeInjector",
- transformIndexHtml: html => {
- return {
- html,
- tags: [
- {
- tag: "script",
- attrs: {
- src: "custom_js.js",
- },
- injectTo: "body",
- },
- {
- tag: "link",
- attrs: {
- rel: "stylesheet",
- href: "custom_css.css",
- },
- injectTo: "head",
- },
- ],
- }
- },
-}