From 04ad0788e314026e0a094a7598b25d13a580887a Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 13 Jan 2023 14:27:16 +0100
Subject: [PATCH 01/23] feat(app): add ability to edit questions on questions
 list to admin

---
 .../QuestionsList/QuestionsList.tsx           | 28 ++++++++++++-------
 .../QuestionsList/QuestionsManagment.tsx      | 24 ++++++++++++++++
 apps/app/src/lib/question.ts                  |  2 +-
 3 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 apps/app/src/components/QuestionsList/QuestionsManagment.tsx

diff --git a/apps/app/src/components/QuestionsList/QuestionsList.tsx b/apps/app/src/components/QuestionsList/QuestionsList.tsx
index 08e5ec28..ae0431b7 100644
--- a/apps/app/src/components/QuestionsList/QuestionsList.tsx
+++ b/apps/app/src/components/QuestionsList/QuestionsList.tsx
@@ -1,13 +1,15 @@
 "use client";
 
 import { useGetQuestionsVotes } from "../../hooks/useQuestionVoting";
-import { Question, QuestionFilter } from "../../types";
+import { useUIContext } from "../../providers/UIProvider";
+import { AdminQuestion, Question, QuestionFilter } from "../../types";
 import { QuestionItem } from "../QuestionItem/QuestionItem";
 import { QuestionLevel } from "../QuestionItem/QuestionLevel";
 import { QuestionVoting } from "./QuestionVoting";
+import { QuestionsManagement } from "./QuestionsManagment";
 
 type QuestionsListProps = Readonly<{
-	questions: Question[];
+	questions: AdminQuestion[];
 	questionFilter: QuestionFilter;
 }>;
 
@@ -20,8 +22,11 @@ export const QuestionsList = ({ questions, questionFilter }: QuestionsListProps)
 
 	return (
 		<ul className="space-y-10">
-			{questions.map(({ id, mdxContent, _levelId, _categoryId, acceptedAt }) => {
-				const questionVote = questionsVotes?.find((questionVote) => questionVote.id === id);
+			{questions.map((question) => {
+				const { id, mdxContent, _levelId, _categoryId, acceptedAt } = question;
+				const questionVote = questionsVotes?.find(
+					(questionVote) => questionVote.id === question.id,
+				);
 				const [votes, voted] = questionVote
 					? [questionVote.votesCount, questionVote.currentUserVotedOn]
 					: [0, false];
@@ -35,12 +40,15 @@ export const QuestionsList = ({ questions, questionFilter }: QuestionsListProps)
 							technology={_categoryId}
 							acceptedAt={acceptedAt}
 							leftSection={
-								<QuestionVoting
-									questionId={id}
-									votes={votes}
-									voted={voted}
-									onQuestionVote={onQuestionVote}
-								/>
+								<>
+									<QuestionsManagement question={question} />
+									<QuestionVoting
+										questionId={id}
+										votes={votes}
+										voted={voted}
+										onQuestionVote={onQuestionVote}
+									/>
+								</>
 							}
 							rightSection={<QuestionLevel level={_levelId} />}
 						/>
diff --git a/apps/app/src/components/QuestionsList/QuestionsManagment.tsx b/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
new file mode 100644
index 00000000..d351097f
--- /dev/null
+++ b/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
@@ -0,0 +1,24 @@
+import { Button } from "../Button/Button";
+import { PrivateElement } from "../PrivateElement";
+import PencilIcon from "../../../public/icons/pencil.svg";
+import { AdminQuestion } from "../../types";
+import { useUIContext } from "../../providers/UIProvider";
+
+export const QuestionsManagement = ({ question }: { question: AdminQuestion }) => {
+	const { openModal } = useUIContext();
+
+	return (
+		<PrivateElement role="admin">
+			<div className="mr-3 flex flex-col justify-start gap-1.5">
+				<Button
+					variant="branding"
+					className="m-px flex w-24 min-w-0 items-center justify-center gap-2 p-0"
+					onClick={() => openModal("AddQuestionModal", question)}
+				>
+					<PencilIcon className="fill-violet-700 dark:fill-neutral-200" />
+					Edytuj
+				</Button>
+			</div>
+		</PrivateElement>
+	);
+};
diff --git a/apps/app/src/lib/question.ts b/apps/app/src/lib/question.ts
index 5306d395..bf378c66 100644
--- a/apps/app/src/lib/question.ts
+++ b/apps/app/src/lib/question.ts
@@ -7,7 +7,7 @@ export type QuestionStatus = typeof statuses[number];
 
 export const serializeQuestionToMarkdown = async ({ question, ...rest }: APIQuestion) => {
 	const mdxContent = await serializeSource(question);
-	return { mdxContent, ...rest };
+	return { mdxContent, question, ...rest };
 };
 
 export const parseStatusQuery = (query: QueryParam | null): QuestionStatus | null => {

From cd8cdafdf2ea26a1e1c310527a3f371af9c9a211 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 13 Jan 2023 14:49:58 +0100
Subject: [PATCH 02/23] feat(app): add ability to edit question on question
 page to admin

---
 .../QuestionsList/QuestionsList.tsx           |  9 +++---
 apps/app/src/components/SingleQuestion.tsx    | 29 ++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/app/src/components/QuestionsList/QuestionsList.tsx b/apps/app/src/components/QuestionsList/QuestionsList.tsx
index ae0431b7..c650021d 100644
--- a/apps/app/src/components/QuestionsList/QuestionsList.tsx
+++ b/apps/app/src/components/QuestionsList/QuestionsList.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { useGetQuestionsVotes } from "../../hooks/useQuestionVoting";
-import { useUIContext } from "../../providers/UIProvider";
-import { AdminQuestion, Question, QuestionFilter } from "../../types";
+import { AdminQuestion, QuestionFilter } from "../../types";
 import { QuestionItem } from "../QuestionItem/QuestionItem";
 import { QuestionLevel } from "../QuestionItem/QuestionLevel";
 import { QuestionVoting } from "./QuestionVoting";
@@ -40,15 +39,15 @@ export const QuestionsList = ({ questions, questionFilter }: QuestionsListProps)
 							technology={_categoryId}
 							acceptedAt={acceptedAt}
 							leftSection={
-								<>
-									<QuestionsManagement question={question} />
+								<div className="flex flex-col gap-1.5">
 									<QuestionVoting
 										questionId={id}
 										votes={votes}
 										voted={voted}
 										onQuestionVote={onQuestionVote}
 									/>
-								</>
+									<QuestionsManagement question={question} />
+								</div>
 							}
 							rightSection={<QuestionLevel level={_levelId} />}
 						/>
diff --git a/apps/app/src/components/SingleQuestion.tsx b/apps/app/src/components/SingleQuestion.tsx
index e8a3b6b3..d46e9bf8 100644
--- a/apps/app/src/components/SingleQuestion.tsx
+++ b/apps/app/src/components/SingleQuestion.tsx
@@ -1,19 +1,19 @@
 "use client";
 
-import { Question } from "../types";
+import { AdminQuestion, Question } from "../types";
 import { useGetQuestionVotesById } from "../hooks/useQuestionVoting";
 import { QuestionItem } from "./QuestionItem/QuestionItem";
 import { QuestionVoting } from "./QuestionsList/QuestionVoting";
 import { QuestionTechnology } from "./QuestionItem/QuestionTechnology";
 import { QuestionLevel } from "./QuestionItem/QuestionLevel";
+import { QuestionsManagement } from "./QuestionsList/QuestionsManagment";
 
 type SingleQuestionProps = Readonly<{
-	question: Question;
+	question: AdminQuestion;
 }>;
 
-export const SingleQuestion = ({
-	question: { id, mdxContent, _levelId, _categoryId, acceptedAt },
-}: SingleQuestionProps) => {
+export const SingleQuestion = ({ question }: SingleQuestionProps) => {
+	const { id, mdxContent, _levelId, _categoryId, acceptedAt } = question;
 	const { votes, voted, refetch } = useGetQuestionVotesById(id);
 
 	return (
@@ -24,14 +24,17 @@ export const SingleQuestion = ({
 			technology={_categoryId}
 			acceptedAt={acceptedAt}
 			leftSection={
-				<QuestionVoting
-					questionId={id}
-					votes={votes}
-					voted={voted}
-					onQuestionVote={() => {
-						void refetch();
-					}}
-				/>
+				<div className="flex flex-col gap-1.5">
+					<QuestionVoting
+						questionId={id}
+						votes={votes}
+						voted={voted}
+						onQuestionVote={() => {
+							void refetch();
+						}}
+					/>
+					<QuestionsManagement question={question} />
+				</div>
 			}
 			rightSection={
 				<div className="flex flex-col items-center">

From 4a995d4a45629a69121bb19f0e2b8c2293e4359c Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 13 Jan 2023 15:09:29 +0100
Subject: [PATCH 03/23] fix(app): refetch questions after edit one of them in
 user panel

---
 .../UserQuestions/UserQuestionLeftSection.tsx     | 15 +++++++++++++--
 .../components/UserQuestions/UserQuestions.tsx    | 10 +++++++---
 .../UserQuestions/UserQuestionsList.tsx           |  7 +++++--
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx b/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
index 8e5998ed..1faebcd2 100644
--- a/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useUIContext } from "../../providers/UIProvider";
 import { AdminQuestion } from "../../types";
 import PencilIcon from "../../../public/icons/pencil.svg";
@@ -5,10 +6,20 @@ import { Button } from "../Button/Button";
 
 type UserQuestionLeftSectionProps = Readonly<{
 	question: AdminQuestion;
+	refetchQuestions: () => void;
 }>;
 
-export const UserQuestionLeftSection = ({ question }: UserQuestionLeftSectionProps) => {
-	const { openModal } = useUIContext();
+export const UserQuestionLeftSection = ({
+	question,
+	refetchQuestions,
+}: UserQuestionLeftSectionProps) => {
+	const { openModal, openedModal } = useUIContext();
+
+	useEffect(() => {
+		if (!openedModal) {
+			refetchQuestions();
+		}
+	}, [openedModal, refetchQuestions]);
 
 	return (
 		<Button
diff --git a/apps/app/src/components/UserQuestions/UserQuestions.tsx b/apps/app/src/components/UserQuestions/UserQuestions.tsx
index b2b665cf..420e5e23 100644
--- a/apps/app/src/components/UserQuestions/UserQuestions.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestions.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense } from "react";
+import { Suspense, useCallback } from "react";
 import { useGetAllQuestions } from "../../hooks/useGetAllQuestions";
 import { useUser } from "../../hooks/useUser";
 import { Technology } from "../../lib/technologies";
@@ -16,13 +16,17 @@ type UserQuestionsProps = Readonly<{
 
 export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps) => {
 	const { userData } = useUser();
-	const { isSuccess, data } = useGetAllQuestions({
+	const { isSuccess, data, refetch } = useGetAllQuestions({
 		page,
 		technology,
 		levels,
 		userId: userData?._user.id,
 	});
 
+	const refetchQuestions = useCallback(() => {
+		void refetch();
+	}, [refetch]);
+
 	return (
 		<FilterableQuestionsList
 			page={page}
@@ -32,7 +36,7 @@ export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps)
 		>
 			{isSuccess && data.data.data.length > 0 ? (
 				<Suspense>
-					<UserQuestionsList questions={data.data.data} />
+					<UserQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (
 				<p className="mt-10 text-2xl font-bold uppercase text-primary dark:text-neutral-200">
diff --git a/apps/app/src/components/UserQuestions/UserQuestionsList.tsx b/apps/app/src/components/UserQuestions/UserQuestionsList.tsx
index 8499f2c7..a7483a1f 100644
--- a/apps/app/src/components/UserQuestions/UserQuestionsList.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestionsList.tsx
@@ -10,9 +10,10 @@ import { UserQuestionLeftSection } from "./UserQuestionLeftSection";
 
 type UserQuestionsListProps = Readonly<{
 	questions: APIQuestion[];
+	refetchQuestions: () => void;
 }>;
 
-export const UserQuestionsList = memo(({ questions }: UserQuestionsListProps) => {
+export const UserQuestionsList = memo(({ questions, refetchQuestions }: UserQuestionsListProps) => {
 	const serializedQuestions = questions.map((question) =>
 		use(
 			(async () => {
@@ -29,7 +30,9 @@ export const UserQuestionsList = memo(({ questions }: UserQuestionsListProps) =>
 					<QuestionItem
 						level={question._levelId}
 						technology={question._categoryId}
-						leftSection={<UserQuestionLeftSection question={question} />}
+						leftSection={
+							<UserQuestionLeftSection question={question} refetchQuestions={refetchQuestions} />
+						}
 						rightSection={
 							<div className="flex flex-col items-center">
 								<QuestionTechnology technology={question._categoryId} />

From cd56f098aa661555a538da82ea6109ba7b45e7c1 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 13 Jan 2023 15:30:26 +0100
Subject: [PATCH 04/23] fix(app): fix text align in "CtaHedaerActiveLink"

---
 apps/app/src/components/CtaHeader/CtaHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/CtaHeader/CtaHeader.tsx b/apps/app/src/components/CtaHeader/CtaHeader.tsx
index b9367b2f..8d75c2bb 100644
--- a/apps/app/src/components/CtaHeader/CtaHeader.tsx
+++ b/apps/app/src/components/CtaHeader/CtaHeader.tsx
@@ -13,7 +13,7 @@ type CtaHeaderActiveLinkProps = Readonly<{
 const CtaHeaderActiveLink = (props: CtaHeaderActiveLinkProps) => (
 	<ActiveLink
 		activeClassName="font-bold border-white"
-		className="flex h-12 grow items-center justify-center border-b-2 border-transparent px-7 transition-opacity hover:opacity-80"
+		className="flex h-12 grow items-center justify-center border-b-2 border-transparent px-7 text-center transition-opacity hover:opacity-80"
 		{...props}
 	/>
 );

From 64b8f10a78cada9d5e454c91de887503db39a502 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 13 Jan 2023 16:56:33 +0100
Subject: [PATCH 05/23] Remove unused import

---
 apps/app/src/components/SingleQuestion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/SingleQuestion.tsx b/apps/app/src/components/SingleQuestion.tsx
index d46e9bf8..e185923f 100644
--- a/apps/app/src/components/SingleQuestion.tsx
+++ b/apps/app/src/components/SingleQuestion.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AdminQuestion, Question } from "../types";
+import { AdminQuestion } from "../types";
 import { useGetQuestionVotesById } from "../hooks/useQuestionVoting";
 import { QuestionItem } from "./QuestionItem/QuestionItem";
 import { QuestionVoting } from "./QuestionsList/QuestionVoting";

From 68c0cbbade7c0e147301013e88c7b33bc628e75a Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 11:45:30 +0100
Subject: [PATCH 06/23] chore: add prettier config file to worspace config

---
 .vscode/settings.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 593413d6..fc77221f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,5 +13,6 @@
 	},
 	"[prisma]": {
 		"editor.defaultFormatter": "Prisma.prisma"
-	}
+	},
+	"prettier.configPath": "prettier.config.js"
 }

From 080d2b41ef342d12203dbc75c8d59cb7bf91dada Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 11:55:38 +0100
Subject: [PATCH 07/23] fix: update questions list after edit any of them in
 user dashboard

---
 .../UserQuestions/UserQuestionLeftSection.tsx     | 15 +++++++++++++--
 .../components/UserQuestions/UserQuestions.tsx    | 10 +++++++---
 .../UserQuestions/UserQuestionsList.tsx           |  7 +++++--
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx b/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
index 3c3b4026..8283db61 100644
--- a/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useUIContext } from "../../providers/UIProvider";
 import { AdminQuestion } from "../../types";
 import PencilIcon from "../../../public/icons/pencil.svg";
@@ -5,10 +6,20 @@ import { Button } from "../Button/Button";
 
 type UserQuestionLeftSectionProps = Readonly<{
 	question: AdminQuestion;
+	refetchQuestions: () => void;
 }>;
 
-export const UserQuestionLeftSection = ({ question }: UserQuestionLeftSectionProps) => {
-	const { openModal } = useUIContext();
+export const UserQuestionLeftSection = ({
+	question,
+	refetchQuestions,
+}: UserQuestionLeftSectionProps) => {
+	const { openModal, openedModal } = useUIContext();
+
+	useEffect(() => {
+		if (!openedModal) {
+			refetchQuestions();
+		}
+	}, [openedModal, refetchQuestions]);
 
 	return (
 		<div className="mr-3 flex flex-col justify-start gap-1.5">
diff --git a/apps/app/src/components/UserQuestions/UserQuestions.tsx b/apps/app/src/components/UserQuestions/UserQuestions.tsx
index b2b665cf..420e5e23 100644
--- a/apps/app/src/components/UserQuestions/UserQuestions.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestions.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense } from "react";
+import { Suspense, useCallback } from "react";
 import { useGetAllQuestions } from "../../hooks/useGetAllQuestions";
 import { useUser } from "../../hooks/useUser";
 import { Technology } from "../../lib/technologies";
@@ -16,13 +16,17 @@ type UserQuestionsProps = Readonly<{
 
 export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps) => {
 	const { userData } = useUser();
-	const { isSuccess, data } = useGetAllQuestions({
+	const { isSuccess, data, refetch } = useGetAllQuestions({
 		page,
 		technology,
 		levels,
 		userId: userData?._user.id,
 	});
 
+	const refetchQuestions = useCallback(() => {
+		void refetch();
+	}, [refetch]);
+
 	return (
 		<FilterableQuestionsList
 			page={page}
@@ -32,7 +36,7 @@ export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps)
 		>
 			{isSuccess && data.data.data.length > 0 ? (
 				<Suspense>
-					<UserQuestionsList questions={data.data.data} />
+					<UserQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (
 				<p className="mt-10 text-2xl font-bold uppercase text-primary dark:text-neutral-200">
diff --git a/apps/app/src/components/UserQuestions/UserQuestionsList.tsx b/apps/app/src/components/UserQuestions/UserQuestionsList.tsx
index 8499f2c7..a7483a1f 100644
--- a/apps/app/src/components/UserQuestions/UserQuestionsList.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestionsList.tsx
@@ -10,9 +10,10 @@ import { UserQuestionLeftSection } from "./UserQuestionLeftSection";
 
 type UserQuestionsListProps = Readonly<{
 	questions: APIQuestion[];
+	refetchQuestions: () => void;
 }>;
 
-export const UserQuestionsList = memo(({ questions }: UserQuestionsListProps) => {
+export const UserQuestionsList = memo(({ questions, refetchQuestions }: UserQuestionsListProps) => {
 	const serializedQuestions = questions.map((question) =>
 		use(
 			(async () => {
@@ -29,7 +30,9 @@ export const UserQuestionsList = memo(({ questions }: UserQuestionsListProps) =>
 					<QuestionItem
 						level={question._levelId}
 						technology={question._categoryId}
-						leftSection={<UserQuestionLeftSection question={question} />}
+						leftSection={
+							<UserQuestionLeftSection question={question} refetchQuestions={refetchQuestions} />
+						}
 						rightSection={
 							<div className="flex flex-col items-center">
 								<QuestionTechnology technology={question._categoryId} />

From eebca85f832dc03ee2e93fab15b5d04530947a1d Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 14:24:11 +0100
Subject: [PATCH 08/23] fix: add loading indicator to questions list in
 dashboards

---
 apps/app/src/components/AdminPanel/AdminPanel.tsx       | 5 +++--
 apps/app/src/components/UserQuestions/UserQuestions.tsx | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/AdminPanel/AdminPanel.tsx b/apps/app/src/components/AdminPanel/AdminPanel.tsx
index a0d1eaee..f4e0278e 100644
--- a/apps/app/src/components/AdminPanel/AdminPanel.tsx
+++ b/apps/app/src/components/AdminPanel/AdminPanel.tsx
@@ -6,6 +6,7 @@ import { Level } from "../../lib/level";
 import { QuestionStatus } from "../../lib/question";
 import { Technology } from "../../lib/technologies";
 import { FilterableQuestionsList } from "../FilterableQuestionsList/FilterableQuestionsList";
+import { Loading } from "../Loading";
 import { AdminPanelQuestionsList } from "./AdminPanelQuestionsList";
 
 type AdminPanelProps = Readonly<{
@@ -16,7 +17,7 @@ type AdminPanelProps = Readonly<{
 }>;
 
 export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps) => {
-	const { isSuccess, data, refetch } = useGetAllQuestions({
+	const { isSuccess, data, refetch, isLoading } = useGetAllQuestions({
 		page,
 		status,
 		technology,
@@ -35,7 +36,7 @@ export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps
 			data={{ status, technology, levels }}
 		>
 			{isSuccess && data.data.data.length > 0 ? (
-				<Suspense>
+				<Suspense fallback={<Loading label="ładowanie pytań" />}>
 					<AdminPanelQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (
diff --git a/apps/app/src/components/UserQuestions/UserQuestions.tsx b/apps/app/src/components/UserQuestions/UserQuestions.tsx
index 420e5e23..3c047d64 100644
--- a/apps/app/src/components/UserQuestions/UserQuestions.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestions.tsx
@@ -5,6 +5,7 @@ import { useGetAllQuestions } from "../../hooks/useGetAllQuestions";
 import { useUser } from "../../hooks/useUser";
 import { Technology } from "../../lib/technologies";
 import { FilterableQuestionsList } from "../FilterableQuestionsList/FilterableQuestionsList";
+import { Loading } from "../Loading";
 import { Level } from "../QuestionItem/QuestionLevel";
 import { UserQuestionsList } from "./UserQuestionsList";
 
@@ -35,7 +36,7 @@ export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps)
 			data={{ technology, levels }}
 		>
 			{isSuccess && data.data.data.length > 0 ? (
-				<Suspense>
+				<Suspense fallback={<Loading label="ładowanie pytań" />}>
 					<UserQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (

From 7b1b8789496515c00d2a15961c01122e7d960c97 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 14:58:38 +0100
Subject: [PATCH 09/23] fix: disable ssr for QuestionsManagement on questions
 pages

---
 .../app/src/components/QuestionsList/QuestionsList.tsx |  9 ++++++++-
 apps/app/src/components/SingleQuestion.tsx             | 10 +++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/QuestionsList/QuestionsList.tsx b/apps/app/src/components/QuestionsList/QuestionsList.tsx
index c650021d..5f1607bd 100644
--- a/apps/app/src/components/QuestionsList/QuestionsList.tsx
+++ b/apps/app/src/components/QuestionsList/QuestionsList.tsx
@@ -1,17 +1,24 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import { useGetQuestionsVotes } from "../../hooks/useQuestionVoting";
 import { AdminQuestion, QuestionFilter } from "../../types";
 import { QuestionItem } from "../QuestionItem/QuestionItem";
 import { QuestionLevel } from "../QuestionItem/QuestionLevel";
 import { QuestionVoting } from "./QuestionVoting";
-import { QuestionsManagement } from "./QuestionsManagment";
 
 type QuestionsListProps = Readonly<{
 	questions: AdminQuestion[];
 	questionFilter: QuestionFilter;
 }>;
 
+const QuestionsManagement = dynamic(
+	() => import("./QuestionsManagment").then((mod) => mod.QuestionsManagement),
+	{
+		ssr: false,
+	},
+);
+
 export const QuestionsList = ({ questions, questionFilter }: QuestionsListProps) => {
 	const { questionsVotes, refetch } = useGetQuestionsVotes(questionFilter);
 
diff --git a/apps/app/src/components/SingleQuestion.tsx b/apps/app/src/components/SingleQuestion.tsx
index e185923f..d87d6543 100644
--- a/apps/app/src/components/SingleQuestion.tsx
+++ b/apps/app/src/components/SingleQuestion.tsx
@@ -1,12 +1,20 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import { AdminQuestion } from "../types";
 import { useGetQuestionVotesById } from "../hooks/useQuestionVoting";
 import { QuestionItem } from "./QuestionItem/QuestionItem";
 import { QuestionVoting } from "./QuestionsList/QuestionVoting";
 import { QuestionTechnology } from "./QuestionItem/QuestionTechnology";
 import { QuestionLevel } from "./QuestionItem/QuestionLevel";
-import { QuestionsManagement } from "./QuestionsList/QuestionsManagment";
+
+const QuestionsManagement = dynamic(
+	() =>
+		import("../components/QuestionsList/QuestionsManagment").then((mod) => mod.QuestionsManagement),
+	{
+		ssr: false,
+	},
+);
 
 type SingleQuestionProps = Readonly<{
 	question: AdminQuestion;

From 686b6232f8139067d1af15250acd731933ca3d18 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 15:05:19 +0100
Subject: [PATCH 10/23] fix: small improvements in "EditAnswer" and
 "AnswerForm"

---
 .../src/components/QuestionAnswers/AnswerForm/AnswerForm.tsx  | 4 +++-
 apps/app/src/components/QuestionAnswers/EditAnswer.tsx        | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/QuestionAnswers/AnswerForm/AnswerForm.tsx b/apps/app/src/components/QuestionAnswers/AnswerForm/AnswerForm.tsx
index f46d6ef7..2118d195 100644
--- a/apps/app/src/components/QuestionAnswers/AnswerForm/AnswerForm.tsx
+++ b/apps/app/src/components/QuestionAnswers/AnswerForm/AnswerForm.tsx
@@ -36,7 +36,9 @@ export const AnswerForm = ({
 	const [isError, setIsError] = useState(false);
 
 	const disabled =
-		content.trim().length === 0 || !sources.every((source) => URL_REGEX.test(source));
+		content.trim().length === 0 ||
+		!sources.every((source) => URL_REGEX.test(source)) ||
+		initContent === content;
 
 	const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
diff --git a/apps/app/src/components/QuestionAnswers/EditAnswer.tsx b/apps/app/src/components/QuestionAnswers/EditAnswer.tsx
index a1834d28..7b0fe31e 100644
--- a/apps/app/src/components/QuestionAnswers/EditAnswer.tsx
+++ b/apps/app/src/components/QuestionAnswers/EditAnswer.tsx
@@ -43,7 +43,7 @@ export const EditAnswer = ({
 		return (
 			<div className="mt-4">
 				<AnswerForm
-					title="Edytuj odpowiedź"
+					title="Zapisz zmiany"
 					initContent={content}
 					initSources={sources}
 					error={isError}

From 34f3b48fcb35102550b3127118c37be7ade9f7b4 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 15:08:48 +0100
Subject: [PATCH 11/23] fix: remove unused import

---
 apps/app/src/components/QuestionItem/QuestionItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/QuestionItem/QuestionItem.tsx b/apps/app/src/components/QuestionItem/QuestionItem.tsx
index 44c2a6c9..204d28a1 100644
--- a/apps/app/src/components/QuestionItem/QuestionItem.tsx
+++ b/apps/app/src/components/QuestionItem/QuestionItem.tsx
@@ -5,7 +5,7 @@ import { Technology } from "../../lib/technologies";
 import { formatDate } from "../../utils/intl";
 import { Box } from "../Box";
 import { MarkdownContent } from "../MarkdownContent";
-import { Level, QuestionLevel } from "./QuestionLevel";
+import { Level } from "./QuestionLevel";
 
 type QuestionItemProps = Readonly<{
 	id: number;

From f3eb9fe1624dab4d2d2e9d95a2c77fed7620f3e8 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 16:57:31 +0100
Subject: [PATCH 12/23] fix: refresh ssr generated page after edit question

---
 apps/app/src/components/AddQuestionModal.tsx        | 13 ++++++++++---
 .../components/QuestionsList/QuestionsManagment.tsx | 11 ++++++++++-
 apps/app/src/providers/UIProvider.tsx               |  2 +-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/AddQuestionModal.tsx b/apps/app/src/components/AddQuestionModal.tsx
index 0a192068..21b73739 100644
--- a/apps/app/src/components/AddQuestionModal.tsx
+++ b/apps/app/src/components/AddQuestionModal.tsx
@@ -54,7 +54,7 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 			onSuccess: () => {
 				setSelectData({});
 				setContent("");
-				modalData ? closeModal() : openModal("AddQuestionConfirmationModal");
+				modalData ? handleCloseModal() : openModal("AddQuestionConfirmationModal");
 			},
 			onError: () => setIsError(true),
 		};
@@ -78,8 +78,15 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 			}
 		};
 
+	const handleCloseModal = () => {
+		closeModal();
+		if (modalData?.customOnClose) {
+			modalData.customOnClose();
+		}
+	};
+
 	return (
-		<BaseModal {...props}>
+		<BaseModal {...props} onClose={handleCloseModal}>
 			<BaseModal.Title modalId={props.modalId}>
 				{modalData ? "Edytuj" : "Nowe"} pytanie
 			</BaseModal.Title>
@@ -135,7 +142,7 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 					<Button
 						type="button"
 						variant="branding"
-						onClick={closeModal}
+						onClick={handleCloseModal}
 						className="dark:focus:shadow-white"
 					>
 						Anuluj
diff --git a/apps/app/src/components/QuestionsList/QuestionsManagment.tsx b/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
index d351097f..8211aee3 100644
--- a/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
+++ b/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
@@ -1,3 +1,5 @@
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
 import { Button } from "../Button/Button";
 import { PrivateElement } from "../PrivateElement";
 import PencilIcon from "../../../public/icons/pencil.svg";
@@ -7,13 +9,20 @@ import { useUIContext } from "../../providers/UIProvider";
 export const QuestionsManagement = ({ question }: { question: AdminQuestion }) => {
 	const { openModal } = useUIContext();
 
+	const router = useRouter();
+	const onQuestionUpdate = useCallback(() => {
+		router.refresh();
+	}, [router]);
+
 	return (
 		<PrivateElement role="admin">
 			<div className="mr-3 flex flex-col justify-start gap-1.5">
 				<Button
 					variant="branding"
 					className="m-px flex w-24 min-w-0 items-center justify-center gap-2 p-0"
-					onClick={() => openModal("AddQuestionModal", question)}
+					onClick={() =>
+						openModal("AddQuestionModal", { ...question, customOnClose: onQuestionUpdate })
+					}
 				>
 					<PencilIcon className="fill-violet-700 dark:fill-neutral-200" />
 					Edytuj
diff --git a/apps/app/src/providers/UIProvider.tsx b/apps/app/src/providers/UIProvider.tsx
index 9392926c..aa003804 100644
--- a/apps/app/src/providers/UIProvider.tsx
+++ b/apps/app/src/providers/UIProvider.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import type { AdminQuestion } from "../types";
 
 interface ModalData {
-	AddQuestionModal: AdminQuestion;
+	AddQuestionModal: AdminQuestion & { customOnClose?: () => void };
 	AddQuestionConfirmationModal: never;
 }
 

From db0594df018827db91791eebde24e801d6646829 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 17:01:59 +0100
Subject: [PATCH 13/23] fix: remove unused import

---
 apps/app/src/components/AdminPanel/AdminPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/AdminPanel/AdminPanel.tsx b/apps/app/src/components/AdminPanel/AdminPanel.tsx
index f4e0278e..fc87dd70 100644
--- a/apps/app/src/components/AdminPanel/AdminPanel.tsx
+++ b/apps/app/src/components/AdminPanel/AdminPanel.tsx
@@ -17,7 +17,7 @@ type AdminPanelProps = Readonly<{
 }>;
 
 export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps) => {
-	const { isSuccess, data, refetch, isLoading } = useGetAllQuestions({
+	const { isSuccess, data, refetch } = useGetAllQuestions({
 		page,
 		status,
 		technology,

From 9b13a5ed671fe87ba336fbeec95c7b25bfd4ed3c Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 17:10:11 +0100
Subject: [PATCH 14/23] fix: fix vercel deployment

---
 apps/app/src/components/QuestionsList/QuestionsList.tsx | 5 ++++-
 apps/app/src/components/SingleQuestion.tsx              | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/QuestionsList/QuestionsList.tsx b/apps/app/src/components/QuestionsList/QuestionsList.tsx
index 5f1607bd..07f6882c 100644
--- a/apps/app/src/components/QuestionsList/QuestionsList.tsx
+++ b/apps/app/src/components/QuestionsList/QuestionsList.tsx
@@ -13,7 +13,10 @@ type QuestionsListProps = Readonly<{
 }>;
 
 const QuestionsManagement = dynamic(
-	() => import("./QuestionsManagment").then((mod) => mod.QuestionsManagement),
+	() =>
+		import(/* webpackChunkName: "QuestionsManagement" */ "./QuestionsManagment").then(
+			(mod) => mod.QuestionsManagement,
+		),
 	{
 		ssr: false,
 	},
diff --git a/apps/app/src/components/SingleQuestion.tsx b/apps/app/src/components/SingleQuestion.tsx
index d87d6543..347584a6 100644
--- a/apps/app/src/components/SingleQuestion.tsx
+++ b/apps/app/src/components/SingleQuestion.tsx
@@ -10,7 +10,9 @@ import { QuestionLevel } from "./QuestionItem/QuestionLevel";
 
 const QuestionsManagement = dynamic(
 	() =>
-		import("../components/QuestionsList/QuestionsManagment").then((mod) => mod.QuestionsManagement),
+		import(
+			/* webpackChunkName: "QuestionsManagement" */ "../components/QuestionsList/QuestionsManagment"
+		).then((mod) => mod.QuestionsManagement),
 	{
 		ssr: false,
 	},

From 536a05f76392430e09d34c57fa070fdf929dcb1b Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 17:37:31 +0100
Subject: [PATCH 15/23] fix: rename function name "customOnClose" =>
 "additionalActionOnClose"

---
 apps/app/src/components/AddQuestionModal.tsx                 | 4 ++--
 apps/app/src/components/QuestionsList/QuestionsManagment.tsx | 5 ++++-
 apps/app/src/providers/UIProvider.tsx                        | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/components/AddQuestionModal.tsx b/apps/app/src/components/AddQuestionModal.tsx
index 21b73739..1cf51461 100644
--- a/apps/app/src/components/AddQuestionModal.tsx
+++ b/apps/app/src/components/AddQuestionModal.tsx
@@ -80,8 +80,8 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 
 	const handleCloseModal = () => {
 		closeModal();
-		if (modalData?.customOnClose) {
-			modalData.customOnClose();
+		if (modalData?.additionalActionOnClose) {
+			modalData.additionalActionOnClose();
 		}
 	};
 
diff --git a/apps/app/src/components/QuestionsList/QuestionsManagment.tsx b/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
index 8211aee3..8b359745 100644
--- a/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
+++ b/apps/app/src/components/QuestionsList/QuestionsManagment.tsx
@@ -21,7 +21,10 @@ export const QuestionsManagement = ({ question }: { question: AdminQuestion }) =
 					variant="branding"
 					className="m-px flex w-24 min-w-0 items-center justify-center gap-2 p-0"
 					onClick={() =>
-						openModal("AddQuestionModal", { ...question, customOnClose: onQuestionUpdate })
+						openModal("AddQuestionModal", {
+							...question,
+							additionalActionOnClose: onQuestionUpdate,
+						})
 					}
 				>
 					<PencilIcon className="fill-violet-700 dark:fill-neutral-200" />
diff --git a/apps/app/src/providers/UIProvider.tsx b/apps/app/src/providers/UIProvider.tsx
index aa003804..1d9da2a8 100644
--- a/apps/app/src/providers/UIProvider.tsx
+++ b/apps/app/src/providers/UIProvider.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import type { AdminQuestion } from "../types";
 
 interface ModalData {
-	AddQuestionModal: AdminQuestion & { customOnClose?: () => void };
+	AddQuestionModal: AdminQuestion & { additionalActionOnClose?: () => void };
 	AddQuestionConfirmationModal: never;
 }
 

From f747452264d43e1abf7ab5418cbc3db2f0d2ad73 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 22:22:29 +0100
Subject: [PATCH 16/23] feat: change loading indicator component

---
 .../questions/[technology]/[page]/loading.tsx |  2 +-
 .../src/components/AdminPanel/AdminPanel.tsx  |  2 +-
 apps/app/src/components/Loading.tsx           | 79 ++++++++++++++++++-
 .../UserQuestions/UserQuestions.tsx           |  2 +-
 4 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/apps/app/src/app/(main-layout)/questions/[technology]/[page]/loading.tsx b/apps/app/src/app/(main-layout)/questions/[technology]/[page]/loading.tsx
index 189c0339..768f4716 100644
--- a/apps/app/src/app/(main-layout)/questions/[technology]/[page]/loading.tsx
+++ b/apps/app/src/app/(main-layout)/questions/[technology]/[page]/loading.tsx
@@ -1,5 +1,5 @@
 import { Loading } from "../../../../../components/Loading";
 
 export default function LoadingQuestions() {
-	return <Loading label="ładowanie pytań" />;
+	return <Loading label="ładowanie pytań" type="article" withTechnology={false} withFilters />;
 }
diff --git a/apps/app/src/components/AdminPanel/AdminPanel.tsx b/apps/app/src/components/AdminPanel/AdminPanel.tsx
index fc87dd70..ac5ce9ae 100644
--- a/apps/app/src/components/AdminPanel/AdminPanel.tsx
+++ b/apps/app/src/components/AdminPanel/AdminPanel.tsx
@@ -36,7 +36,7 @@ export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps
 			data={{ status, technology, levels }}
 		>
 			{isSuccess && data.data.data.length > 0 ? (
-				<Suspense fallback={<Loading label="ładowanie pytań" />}>
+				<Suspense fallback={<Loading label="ładowanie pytań" type="article" />}>
 					<AdminPanelQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (
diff --git a/apps/app/src/components/Loading.tsx b/apps/app/src/components/Loading.tsx
index 9dfa40fc..ccf6701a 100644
--- a/apps/app/src/components/Loading.tsx
+++ b/apps/app/src/components/Loading.tsx
@@ -1,10 +1,83 @@
 import { twMerge } from "tailwind-merge";
 
-export const Loading = ({ label, className }: { label: string; className?: string }) => {
+type LoaderType = "spinner" | "article";
+
+export const Loading = ({
+	label,
+	type = "spinner",
+	withTechnology = false,
+	withFilters = false,
+	className,
+}: {
+	label: string;
+	withTechnology?: boolean;
+	type?: LoaderType;
+	withFilters?: boolean;
+	className?: string;
+}) => {
+	if (type === "article") {
+		return (
+			<>
+				{withFilters && (
+					<div className="flex animate-pulse flex-wrap items-baseline justify-between gap-3 text-neutral-500 dark:text-neutral-400">
+						<span className="h-8 w-28 bg-neutral-100 dark:bg-neutral-700 md:gap-3"></span>
+						<div className="flex flex-wrap items-baseline gap-1.5 md:gap-3">
+							<span className="h-8 w-28 bg-neutral-100 dark:bg-neutral-700 md:gap-3"></span>
+							<span className="hidden h-8 w-52 bg-neutral-100 dark:bg-neutral-700 md:flex md:gap-3"></span>
+						</div>
+					</div>
+				)}
+				<ul className="flex w-full list-none flex-col gap-5" role="status" aria-label={label}>
+					{[...Array(10).keys()].map((i) => (
+						<li key={i}>
+							<article
+								className={twMerge(
+									`flex animate-pulse bg-white p-3 text-sm text-neutral-500 shadow-md dark:bg-white-dark dark:text-neutral-200 md:p-5`,
+								)}
+								style={{ animationDelay: `${i * 0.25}s` }}
+							>
+								<div className="mr-3 flex flex-col justify-start gap-1.5">
+									<span className="block h-8 w-20 bg-neutral-100 dark:bg-neutral-700"></span>
+								</div>
+								<div className="question-content flex max-w-full grow flex-col gap-1.5 px-2">
+									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+								</div>
+								<div className="flex min-w-max flex-col items-center md:ml-4 md:items-end">
+									<div className="flex flex-col items-center">
+										{withTechnology && (
+											<div className="mb-3 flex flex-col items-center self-center">
+												<span className="mb-1 h-3.5 w-10 bg-neutral-100 dark:bg-neutral-700"></span>
+												<div className="h-8 w-8 rounded-full bg-neutral-100 dark:bg-neutral-700"></div>
+											</div>
+										)}
+										<span className="h-8 min-w-[64px] rounded-full bg-neutral-100 dark:bg-neutral-700 md:min-w-[80px]"></span>
+									</div>
+									<div className="mt-3">
+										<div className="block h-3 w-12 bg-neutral-100 dark:bg-neutral-700 md:w-20"></div>
+									</div>
+								</div>
+							</article>
+						</li>
+					))}
+				</ul>
+			</>
+		);
+	}
+
 	return (
-		<div className={twMerge(`mt-8 flex items-center justify-center`, className)} aria-label={label}>
+		<div
+			className={twMerge(`mt-8 flex items-center justify-center`, className)}
+			aria-label={label}
+			role="status"
+		>
 			<div className="h-12 w-12 animate-loader border-4 border-primary dark:border-neutral-200">
-				<div className="w-full animate-loader-inner bg-primary dark:bg-neutral-200" />
+				<div className="w-full animate-loader-inner bg-primary dark:bg-neutral-100" />
 			</div>
 		</div>
 	);
diff --git a/apps/app/src/components/UserQuestions/UserQuestions.tsx b/apps/app/src/components/UserQuestions/UserQuestions.tsx
index 3c047d64..78c46a86 100644
--- a/apps/app/src/components/UserQuestions/UserQuestions.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestions.tsx
@@ -36,7 +36,7 @@ export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps)
 			data={{ technology, levels }}
 		>
 			{isSuccess && data.data.data.length > 0 ? (
-				<Suspense fallback={<Loading label="ładowanie pytań" />}>
+				<Suspense fallback={<Loading label="ładowanie pytań" type="article" withTechnology />}>
 					<UserQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (

From 906eb5708f215ce44bd2bfa4f36309a381622a66 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 22:43:40 +0100
Subject: [PATCH 17/23] fix: improve "Loading" component styles

---
 apps/app/src/components/Loading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/Loading.tsx b/apps/app/src/components/Loading.tsx
index ccf6701a..98f54744 100644
--- a/apps/app/src/components/Loading.tsx
+++ b/apps/app/src/components/Loading.tsx
@@ -37,7 +37,7 @@ export const Loading = ({
 								style={{ animationDelay: `${i * 0.25}s` }}
 							>
 								<div className="mr-3 flex flex-col justify-start gap-1.5">
-									<span className="block h-8 w-20 bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-8 w-20 rounded-md bg-neutral-100 dark:bg-neutral-700"></span>
 								</div>
 								<div className="question-content flex max-w-full grow flex-col gap-1.5 px-2">
 									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>

From d4e5a74a3f7fbde98aeb9afbd35976137d917119 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 22:54:59 +0100
Subject: [PATCH 18/23] fix: improve loader a11y

---
 apps/app/src/components/Loading.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/Loading.tsx b/apps/app/src/components/Loading.tsx
index 98f54744..f86ecf08 100644
--- a/apps/app/src/components/Loading.tsx
+++ b/apps/app/src/components/Loading.tsx
@@ -17,7 +17,7 @@ export const Loading = ({
 }) => {
 	if (type === "article") {
 		return (
-			<>
+			<div role="status" aria-label={label}>
 				{withFilters && (
 					<div className="flex animate-pulse flex-wrap items-baseline justify-between gap-3 text-neutral-500 dark:text-neutral-400">
 						<span className="h-8 w-28 bg-neutral-100 dark:bg-neutral-700 md:gap-3"></span>
@@ -27,7 +27,7 @@ export const Loading = ({
 						</div>
 					</div>
 				)}
-				<ul className="flex w-full list-none flex-col gap-5" role="status" aria-label={label}>
+				<ul className="flex w-full list-none flex-col gap-5">
 					{[...Array(10).keys()].map((i) => (
 						<li key={i}>
 							<article
@@ -66,7 +66,7 @@ export const Loading = ({
 						</li>
 					))}
 				</ul>
-			</>
+			</div>
 		);
 	}
 

From a92f98ba242fc34644a0bfb931b98691815b8799 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 23:02:59 +0100
Subject: [PATCH 19/23] fix: improve styles of "Loading" component

---
 apps/app/src/components/Loading.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/Loading.tsx b/apps/app/src/components/Loading.tsx
index f86ecf08..9b121491 100644
--- a/apps/app/src/components/Loading.tsx
+++ b/apps/app/src/components/Loading.tsx
@@ -17,7 +17,7 @@ export const Loading = ({
 }) => {
 	if (type === "article") {
 		return (
-			<div role="status" aria-label={label}>
+			<div role="status" aria-label={label} className="flex w-full flex-col gap-10">
 				{withFilters && (
 					<div className="flex animate-pulse flex-wrap items-baseline justify-between gap-3 text-neutral-500 dark:text-neutral-400">
 						<span className="h-8 w-28 bg-neutral-100 dark:bg-neutral-700 md:gap-3"></span>
@@ -27,7 +27,7 @@ export const Loading = ({
 						</div>
 					</div>
 				)}
-				<ul className="flex w-full list-none flex-col gap-5">
+				<ul className="flex w-full list-none flex-col gap-10">
 					{[...Array(10).keys()].map((i) => (
 						<li key={i}>
 							<article

From 32f3641ad8f930b067c52619863c48e504f4b8dc Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Fri, 20 Jan 2023 23:09:54 +0100
Subject: [PATCH 20/23] fix: improve light theme of loading component

---
 apps/app/src/components/Loading.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/components/Loading.tsx b/apps/app/src/components/Loading.tsx
index 9b121491..edca7734 100644
--- a/apps/app/src/components/Loading.tsx
+++ b/apps/app/src/components/Loading.tsx
@@ -19,11 +19,11 @@ export const Loading = ({
 		return (
 			<div role="status" aria-label={label} className="flex w-full flex-col gap-10">
 				{withFilters && (
-					<div className="flex animate-pulse flex-wrap items-baseline justify-between gap-3 text-neutral-500 dark:text-neutral-400">
-						<span className="h-8 w-28 bg-neutral-100 dark:bg-neutral-700 md:gap-3"></span>
+					<div className="flex animate-pulse flex-wrap items-baseline justify-between gap-3">
+						<span className="h-8 w-28 bg-white shadow-md dark:bg-neutral-700 md:gap-3"></span>
 						<div className="flex flex-wrap items-baseline gap-1.5 md:gap-3">
-							<span className="h-8 w-28 bg-neutral-100 dark:bg-neutral-700 md:gap-3"></span>
-							<span className="hidden h-8 w-52 bg-neutral-100 dark:bg-neutral-700 md:flex md:gap-3"></span>
+							<span className="h-8 w-28 bg-white shadow-md dark:bg-neutral-700 md:gap-3"></span>
+							<span className="hidden h-8 w-52 bg-white shadow-md dark:bg-neutral-700 md:flex md:gap-3"></span>
 						</div>
 					</div>
 				)}

From 2155e50df0cc366ad66e94c0d211d3e85d849a63 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Sat, 21 Jan 2023 09:48:45 +0100
Subject: [PATCH 21/23] Update apps/app/src/components/Loading.tsx

---
 apps/app/src/components/Loading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/Loading.tsx b/apps/app/src/components/Loading.tsx
index edca7734..4d26067b 100644
--- a/apps/app/src/components/Loading.tsx
+++ b/apps/app/src/components/Loading.tsx
@@ -23,7 +23,7 @@ export const Loading = ({
 						<span className="h-8 w-28 bg-white shadow-md dark:bg-neutral-700 md:gap-3"></span>
 						<div className="flex flex-wrap items-baseline gap-1.5 md:gap-3">
 							<span className="h-8 w-28 bg-white shadow-md dark:bg-neutral-700 md:gap-3"></span>
-							<span className="hidden h-8 w-52 bg-white shadow-md dark:bg-neutral-700 md:flex md:gap-3"></span>
+							<span className="h-8 w-52 bg-white shadow-md dark:bg-neutral-700 md:gap-3"></span>
 						</div>
 					</div>
 				)}

From e87aebb6be80ae92ca07c20acddd1a224e16d14b Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Mon, 23 Jan 2023 19:51:32 +0100
Subject: [PATCH 22/23] implement "additionalActionOnClose" function in
 dashboard modals

---
 .../AdminPanel/AdminPanelQuestionLeftSection.tsx    |  8 +-------
 .../UserQuestions/UserQuestionLeftSection.tsx       | 13 ++++++-------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/apps/app/src/components/AdminPanel/AdminPanelQuestionLeftSection.tsx b/apps/app/src/components/AdminPanel/AdminPanelQuestionLeftSection.tsx
index 82fb0ddd..cad12495 100644
--- a/apps/app/src/components/AdminPanel/AdminPanelQuestionLeftSection.tsx
+++ b/apps/app/src/components/AdminPanel/AdminPanelQuestionLeftSection.tsx
@@ -24,12 +24,6 @@ export const AdminPanelQuestionLeftSection = ({
 	const { openModal, openedModal } = useUIContext();
 	const { id, _statusId: status } = question;
 
-	useEffect(() => {
-		if (!openedModal) {
-			refetchQuestions();
-		}
-	}, [openedModal, refetchQuestions]);
-
 	const handleAcceptQuestionClick = () => {
 		patchQuestionMutation.mutate(
 			{ id, status: "accepted" },
@@ -48,7 +42,7 @@ export const AdminPanelQuestionLeftSection = ({
 	};
 
 	const handleEditQuestionClick = () => {
-		openModal("AddQuestionModal", question);
+		openModal("AddQuestionModal", { ...question, additionalActionOnClose: refetchQuestions });
 	};
 
 	return (
diff --git a/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx b/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
index 8283db61..bdd1f4e0 100644
--- a/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx
@@ -15,18 +15,17 @@ export const UserQuestionLeftSection = ({
 }: UserQuestionLeftSectionProps) => {
 	const { openModal, openedModal } = useUIContext();
 
-	useEffect(() => {
-		if (!openedModal) {
-			refetchQuestions();
-		}
-	}, [openedModal, refetchQuestions]);
-
 	return (
 		<div className="mr-3 flex flex-col justify-start gap-1.5">
 			<Button
 				variant="branding"
 				className="m-px flex w-24 min-w-0 items-center justify-center gap-2 p-0"
-				onClick={() => openModal("AddQuestionModal", question)}
+				onClick={() =>
+					openModal("AddQuestionModal", {
+						...question,
+						additionalActionOnClose: refetchQuestions,
+					})
+				}
 			>
 				<PencilIcon className="fill-violet-700 dark:fill-neutral-200" />
 				Edytuj

From 2d109c53e491308bc1f3245c3d8dade4bc9bf0c5 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Mon, 23 Jan 2023 20:05:55 +0100
Subject: [PATCH 23/23] improve loading component and implement this changes

---
 apps/app/src/components/AdminPanel/AdminPanel.tsx     |  2 +-
 apps/app/src/components/Loading.tsx                   | 11 ++++++++---
 .../src/components/UserQuestions/UserQuestions.tsx    |  4 +++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/AdminPanel/AdminPanel.tsx b/apps/app/src/components/AdminPanel/AdminPanel.tsx
index ac5ce9ae..4e7bd54a 100644
--- a/apps/app/src/components/AdminPanel/AdminPanel.tsx
+++ b/apps/app/src/components/AdminPanel/AdminPanel.tsx
@@ -36,7 +36,7 @@ export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps
 			data={{ status, technology, levels }}
 		>
 			{isSuccess && data.data.data.length > 0 ? (
-				<Suspense fallback={<Loading label="ładowanie pytań" type="article" />}>
+				<Suspense fallback={<Loading label="ładowanie pytań" type="article" admin />}>
 					<AdminPanelQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (
diff --git a/apps/app/src/components/Loading.tsx b/apps/app/src/components/Loading.tsx
index 4d26067b..fe928406 100644
--- a/apps/app/src/components/Loading.tsx
+++ b/apps/app/src/components/Loading.tsx
@@ -7,6 +7,7 @@ export const Loading = ({
 	type = "spinner",
 	withTechnology = false,
 	withFilters = false,
+	admin = false,
 	className,
 }: {
 	label: string;
@@ -14,6 +15,7 @@ export const Loading = ({
 	type?: LoaderType;
 	withFilters?: boolean;
 	className?: string;
+	admin?: boolean;
 }) => {
 	if (type === "article") {
 		return (
@@ -37,7 +39,11 @@ export const Loading = ({
 								style={{ animationDelay: `${i * 0.25}s` }}
 							>
 								<div className="mr-3 flex flex-col justify-start gap-1.5">
-									<span className="block h-8 w-20 rounded-md bg-neutral-100 dark:bg-neutral-700"></span>
+									{admin ? (
+										<span className="block h-8 w-20 rounded-md bg-neutral-100 dark:bg-neutral-700"></span>
+									) : (
+										<span className="block h-7 w-8 rounded-md bg-neutral-100 dark:bg-neutral-700"></span>
+									)}
 								</div>
 								<div className="question-content flex max-w-full grow flex-col gap-1.5 px-2">
 									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
@@ -45,8 +51,7 @@ export const Loading = ({
 									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
 									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
 									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
-									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
-									<span className="block h-3.5 w-full bg-neutral-100 dark:bg-neutral-700"></span>
+									<span className="block h-3.5 w-[80%] bg-neutral-100 dark:bg-neutral-700"></span>
 								</div>
 								<div className="flex min-w-max flex-col items-center md:ml-4 md:items-end">
 									<div className="flex flex-col items-center">
diff --git a/apps/app/src/components/UserQuestions/UserQuestions.tsx b/apps/app/src/components/UserQuestions/UserQuestions.tsx
index 78c46a86..c4e4130c 100644
--- a/apps/app/src/components/UserQuestions/UserQuestions.tsx
+++ b/apps/app/src/components/UserQuestions/UserQuestions.tsx
@@ -36,7 +36,9 @@ export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps)
 			data={{ technology, levels }}
 		>
 			{isSuccess && data.data.data.length > 0 ? (
-				<Suspense fallback={<Loading label="ładowanie pytań" type="article" withTechnology />}>
+				<Suspense
+					fallback={<Loading label="ładowanie pytań" type="article" withTechnology admin />}
+				>
 					<UserQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (