Fix auth flicker (#75)

* Remove experiments flicker for unauthenticated users

* Decrease size of NewScenarioButton spinner

src/components/OutputsTable/NewScenarioButton.tsx

@@ -49,7 +49,11 @@ export default function NewScenarioButton() {
         Add Scenario
       </StyledButton>
       <StyledButton onClick={onAutogenerate}>
-        <Icon as={autogenerating ? Spinner : BsPlus} boxSize={6} mr={autogenerating ? 1 : 0} />
+        <Icon
+          as={autogenerating ? Spinner : BsPlus}
+          boxSize={autogenerating ? 4 : 6}
+          mr={autogenerating ? 2 : 0}
+        />
         Autogenerate Scenario
       </StyledButton>
     </HStack>

src/pages/experiments/index.tsx

@@ -20,22 +20,25 @@ export default function ExperimentsPage() {
   const experiments = api.experiments.list.useQuery();
 
   const user = useSession().data;
+  const authLoading = useSession().status === "loading";
 
-  if (user === null) {
+  if (user === null || authLoading) {
     return (
       <AppShell title="Experiments">
         <Center h="100%">
-          <Text>
+          {!authLoading && (
-            <Link
+            <Text>
-              onClick={() => {
+              <Link
-                signIn("github").catch(console.error);
+                onClick={() => {
-              }}
+                  signIn("github").catch(console.error);
-              textDecor="underline"
+                }}
-            >
+                textDecor="underline"
-              Sign in
+              >
-            </Link>{" "}
+                Sign in
-            to view or create new experiments!
+              </Link>{" "}
-          </Text>
+              to view or create new experiments!
+            </Text>
+          )}
         </Center>
       </AppShell>
     );