diff --git a/code/frontend/src/components/base/Starting.js b/code/frontend/src/components/base/Starting.js
new file mode 100644
index 0000000..6a6a814
--- /dev/null
+++ b/code/frontend/src/components/base/Starting.js
@@ -0,0 +1,18 @@
+import React from "react"
+import { faSpinner } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+
+/**
+ * A div with a static dots icon and a "Starting..." text.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Starting() {
+ return (
+
diff --git a/code/frontend/src/routes/PageRepositories.js b/code/frontend/src/routes/PageRepositories.js
index d68a3fc..b706154 100644
--- a/code/frontend/src/routes/PageRepositories.js
+++ b/code/frontend/src/routes/PageRepositories.js
@@ -5,30 +5,24 @@ import BoxRepositoriesActive from "../components/interactive/BoxRepositoriesActi
import BoxRepositoriesArchived from "../components/interactive/BoxRepositoriesArchived"
import useBackendImmediately from "../hooks/useBackendImmediately"
import ContextUser from "../contexts/ContextUser"
-import BoxAlert from "../components/base/BoxAlert"
-import Loading from "../components/base/Loading"
+import renderContents from "../utils/renderContents"
export default function PageRepositories({ children, className, ...props }) {
const { fetchDataAuth } = useContext(ContextUser)
- const { data, error, fetchNow: refresh } = useBackendImmediately(fetchDataAuth, "GET", "/api/v1/repositories/")
-
- let contents
- if(error) {
- contents =
{error}
- }
- else if(data) {
- const repositories = [...data["owner"], ...data["spectator"]]
- const active = repositories.filter(r => r.is_active)
- const archived = repositories.filter(r => !r.is_active)
- contents = <>
-
-
- >
- }
- else {
- contents =
- }
+ const repositoryRequest = useBackendImmediately(fetchDataAuth, "GET", "/api/v1/repositories/")
+ const contents = renderContents(
+ repositoryRequest,
+ data => {
+ const repositories = [...data["owner"], ...data["spectator"]]
+ const active = repositories.filter(r => r.is_active)
+ const archived = repositories.filter(r => !r.is_active)
+ return <>
+
+
+ >
+ },
+ )
return (
diff --git a/code/frontend/src/utils/renderContents.js b/code/frontend/src/utils/renderContents.js
new file mode 100644
index 0000000..c80a47e
--- /dev/null
+++ b/code/frontend/src/utils/renderContents.js
@@ -0,0 +1,19 @@
+import Loading from "../components/base/Loading"
+import BoxAlert from "../components/base/BoxAlert"
+import Starting from "../components/base/Starting"
+
+
+export default function renderContents(requestHookResults, renderFunction) {
+ const { data, error, loading } = requestHookResults
+
+ if(loading) {
+ return
+ }
+ if(error) {
+ return {error}
+ }
+ if(data) {
+ return renderFunction(data)
+ }
+ return
+}