fix: Optimize GitHub parameter validation by skipping unnecessary che…

…cks on certain pages and improve UI display
DHRI-Curriculum · Dec 18, 2024 · 7be1000 · 7be1000
1 parent 97ff1ee
commit 7be1000
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 41 deletions.
diff --git a/components/GitHubContext.js b/components/GitHubContext.js
@@ -3,13 +3,15 @@ import { getGitHubParamsFromURL, validateParams } from '../utils/github';
 import { useRouter } from 'next/router';
 import { GitHubStatus } from './GitHubStatus';
 
+const PAGES_NEEDING_GITHUB = ['/inst', '/workshops', '/dynamic'];
+
 export const GitHubContext = createContext();
 
 export function GitHubProvider({ children }) {
   const router = useRouter();
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false); // Start false to prevent flash
   const [validationStatus, setValidationStatus] = useState({
-    isValid: false,
+    isValid: true, // Start true to prevent flash
     messages: [],
     checks: []
   });
@@ -18,50 +20,28 @@ export function GitHubProvider({ children }) {
     const checkParams = async () => {
       if (!router.isReady) return;
 
-      setLoading(true);
-      try {
-        const params = getGitHubParamsFromURL();
-        const status = await validateParams(params);
-        setValidationStatus(status);
-      } catch (error) {
-        setValidationStatus({
-          isValid: false,
-          messages: [`Validation error: ${error.message}`],
-          checks: []
-        });
-      } finally {
-        setLoading(false);
+      // Skip validation for pages that don't need it
+      if (!PAGES_NEEDING_GITHUB.includes(router.pathname)) {
+        return;
       }
+
+      setLoading(true);
+      const params = getGitHubParamsFromURL();
+      const status = await validateParams(params);
+      setValidationStatus(status);
+      setLoading(false);
     };
 
     checkParams();
-
-    // Cleanup
-    return () => {
-      setValidationStatus({
-        isValid: false,
-        messages: [],
-        checks: []
-      });
-    };
-  }, [router.isReady, router.query]);
+  }, [router.isReady, router.pathname]);
 
-  const value = {
-    loading,
-    validationStatus,
-    setValidationStatus
-  };
+  // Only show validation UI on relevant pages
+  const showValidation = PAGES_NEEDING_GITHUB.includes(router.pathname);
 
   return (
-    <GitHubContext.Provider value={value}>
-      {loading ? (
-        <div>Validating GitHub parameters...</div>
-      ) : (
-        <>
-          <GitHubStatus validationStatus={validationStatus} />
-          {children}
-        </>
-      )}
+    <GitHubContext.Provider value={{ loading, validationStatus }}>
+      {children}
+      {showValidation && <GitHubStatus validationStatus={validationStatus} />}
     </GitHubContext.Provider>
   );
 }

diff --git a/components/GitHubStatus.js b/components/GitHubStatus.js
@@ -6,10 +6,11 @@ export function GitHubStatus({ validationStatus }) {
   return (
     <div style={{ 
       position: 'fixed',
-      top: '1rem',
+      bottom: '1rem', // Move to bottom
       right: '1rem',
       zIndex: 9999,
-      maxWidth: '400px'
+      maxWidth: '400px',
+      opacity: 0.9 // Make slightly transparent
     }}>
       {validationStatus.messages.map((message, i) => (
         <Alert