Fix missing query param error, spinner DOM error

oddgrd · Feb 18, 2022 · 7b8af99 · 7b8af99
1 parent 70f87bf
commit 7b8af99
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 29 deletions.
diff --git a/client/src/assets/images/Loading.svg → client/public/Loading.svg b/client/src/assets/images/Loading.svg → client/public/Loading.svg
diff --git a/client/src/components/Spinner.tsx b/client/src/components/Spinner.tsx
@@ -1,10 +1,15 @@
 import Image from 'next/image';
-import spinner from '../assets/images/Loading.svg';
 
 export const Spinner = () => {
   return (
     <div className='loading-svg'>
-      <Image width={120} height={120} src={spinner} aria-label='Loading' />
+      <Image
+        width={120}
+        height={120}
+        src='/Loading.svg'
+        aria-label='Loading'
+        priority={true}
+      />
     </div>
   );
 };
diff --git a/client/src/pages/board/[id].tsx b/client/src/pages/board/[id].tsx
@@ -34,9 +34,11 @@ const Board = () => {
   const boardId = typeof router.query.id === 'string' ? router.query.id : '';
   const { data, loading, error } = useGetBoardQuery({
     variables: { boardId },
+    skip: !router.isReady,
   });
   const { data: layoutData } = useGetBoardLayoutsQuery({
     variables: { boardId },
+    skip: !router.isReady,
   });
 
   if (error) {

diff --git a/client/src/pages/boards/[id]/create-problem/index.tsx b/client/src/pages/boards/[id]/create-problem/index.tsx
@@ -25,6 +25,7 @@ const CreateProblem = () => {
   useIsWhitelisted(boardId);
   const { data, loading } = useGetBoardQuery({
     variables: { boardId },
+    skip: !router.isReady,
   });
 
   useEffect(() => {

diff --git a/client/src/pages/boards/[id]/index.tsx b/client/src/pages/boards/[id]/index.tsx
@@ -46,16 +46,11 @@ const Problems = () => {
 
   const { data: meData } = useMeQuery();
 
-  const {
-    data: boardData,
-    loading: boardLoading,
-    error: boardError,
-  } = useGetBoardQuery({
+  const { data: boardData, error: boardError } = useGetBoardQuery({
     variables: {
       boardId,
     },
     skip: !router.isReady,
-    notifyOnNetworkStatusChange: true,
   });
 
   const { ref, inView } = useInView({
@@ -114,14 +109,6 @@ const Problems = () => {
     );
   }
 
-  if (boardLoading && !boardData) {
-    return (
-      <Layout title='Problems'>
-        <Spinner />
-      </Layout>
-    );
-  }
-
   if (boardData && !boardData?.getBoard.currentLayout) {
     return (
       <Layout title='Problems'>
@@ -150,16 +137,17 @@ const Problems = () => {
           >
             <FaSyncAlt size={27} />
           </button>
-
-          <Link href={`/boards/${boardId}/create-problem`}>
-            <a
-              className='btn btn-link btn-icon'
-              aria-label='Create problem'
-              title='Create Problem'
-            >
-              <FaPlusSquare size={28} />
-            </a>
-          </Link>
+          {router.isReady && (
+            <Link href={`/boards/${boardId}/create-problem`}>
+              <a
+                className='btn btn-link btn-icon'
+                aria-label='Create problem'
+                title='Create Problem'
+              >
+                <FaPlusSquare size={28} />
+              </a>
+            </Link>
+          )}
         </>
       }
     >
@@ -184,9 +172,13 @@ const Problems = () => {
         data?.getProblems.problems.length === 0 &&
         searchPattern.length === 0 ? (
           <div className={styles.createProblem}>
-            <Link href={`/boards/${boardId}/create-problem`}>
-              <a className='btn'>Create First Problem</a>
-            </Link>
+            {router.isReady ? (
+              <Link href={`/boards/${boardId}/create-problem`}>
+                <a className='btn'>Create First Problem</a>
+              </Link>
+            ) : (
+              <p>No problems found</p>
+            )}
           </div>
         ) : data?.getProblems.problems.length === 0 &&
           searchPattern.length !== 0 ? (

diff --git a/client/src/pages/problem/[id].tsx b/client/src/pages/problem/[id].tsx
@@ -33,6 +33,7 @@ const Problem = () => {
       id: problemId,
     },
     fetchPolicy: 'cache-and-network',
+    skip: !router.isReady,
   });
 
   useEffect(() => {

diff --git a/client/src/pages/profile/[id].tsx b/client/src/pages/profile/[id].tsx
@@ -19,11 +19,14 @@ const Profile = () => {
 
   const { data, loading } = useGetUserQuery({
     variables: { id: profileId },
+    fetchPolicy: 'cache-and-network',
+    skip: !router.isReady,
   });
 
   const { data: sendData, loading: sendLoading } = useGetSentProblemsQuery({
     variables: { userId: profileId },
     fetchPolicy: 'cache-and-network',
+    skip: !router.isReady,
   });
 
   const ascentGrades = useMemo(() => {