don’t show skeletons for fast-loading pages

src/components/EmptyState.tsx

@@ -71,6 +71,7 @@ export default function EmptyState({
         sx={{
           maxWidth: "25em",
           px: 2,
+          typography: "body2",
 
           "& .icon": {
             color: "action.active",

src/pages/Home.tsx

@@ -14,6 +14,7 @@ import {
   Checkbox,
   IconButton,
   Zoom,
+  Fade,
 } from "@material-ui/core";
 import ViewListIcon from "@material-ui/icons/ViewListOutlined";
 import ViewGridIcon from "@material-ui/icons/ViewModuleOutlined";
@@ -89,7 +90,13 @@ export default function HomePage() {
   );
 
   if (!Array.isArray(tables))
-    return view === "list" ? <TableListSkeleton /> : <TableGridSkeleton />;
+    return (
+      <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+        <div>
+          {view === "list" ? <TableListSkeleton /> : <TableGridSkeleton />}
+        </div>
+      </Fade>
+    );
 
   if (settingsDocState.error?.code === "permission-denied")
     return <AccessDenied />;

src/pages/Settings/ProjectSettings.tsx

@@ -1,4 +1,4 @@
-import { Container, Stack } from "@material-ui/core";
+import { Container, Stack, Fade } from "@material-ui/core";
 
 import SettingsSkeleton from "components/Settings/SettingsSkeleton";
 import SettingsSection from "components/Settings/SettingsSection";
@@ -71,11 +71,13 @@ export default function ProjectSettingsPage() {
   return (
     <Container maxWidth="sm" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       {settingsState.loading || publicSettingsState.loading ? (
-        <Stack spacing={4}>
-          <SettingsSkeleton />
-          <SettingsSkeleton />
-          <SettingsSkeleton />
-        </Stack>
+        <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+          <Stack spacing={4}>
+            <SettingsSkeleton />
+            <SettingsSkeleton />
+            <SettingsSkeleton />
+          </Stack>
+        </Fade>
       ) : (
         <Stack spacing={4}>
           <SettingsSection title="About" transitionTimeout={100}>

src/pages/Settings/UserManagement.tsx

@@ -1,4 +1,11 @@
-import { Container, Stack, Typography, Paper, List } from "@material-ui/core";
+import {
+  Container,
+  Stack,
+  Typography,
+  Paper,
+  List,
+  Fade,
+} from "@material-ui/core";
 
 import FloatingSearch from "components/FloatingSearch";
 import SlideTransition from "components/Modal/SlideTransition";
@@ -61,13 +68,15 @@ export default function UserManagementPage() {
       </SlideTransition>
 
       {loading || (query === "" && results.length === 0) ? (
-        <Paper>
-          <List>
-            <UserSkeleton />
-            <UserSkeleton />
-            <UserSkeleton />
-          </List>
-        </Paper>
+        <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+          <Paper>
+            <List>
+              <UserSkeleton />
+              <UserSkeleton />
+              <UserSkeleton />
+            </List>
+          </Paper>
+        </Fade>
       ) : (
         <SlideTransition in timeout={100 + 50}>
           <Paper>