chore: small styling changes

src/components/loading.rs

@@ -3,7 +3,7 @@ use leptos::prelude::*;
 #[component]
 pub fn Loading() -> impl IntoView {
     view! {
-        <div class="size-20 mx-auto">
+        <div class="size-20 mx-auto mt-20">
             <img src="/loading.gif" />
         </div>
     }

src/pages/student/academics_page.rs

@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use crate::components::{OutlinedTextField, TextFieldType, ValidatedForm};
+use crate::components::{Loading, OutlinedTextField, TextFieldType, ValidatedForm};
 use crate::pages::student::form_setup::use_student_form;
 
 #[component]
@@ -7,6 +7,10 @@ pub fn StudentAcademicsPage() -> impl IntoView {
     let controller = use_student_form("academics");
 
     view! {
+        <Show 
+            when=move || controller.data_resource.get().is_some()
+            fallback=Loading
+        >
             <div class="flex flex-1" />
             <div class="flex flex-col flex-2 mt-6">
                 <ValidatedForm title="Academic Information" on_submit=controller.submit_action>
@@ -53,5 +57,6 @@ pub fn StudentAcademicsPage() -> impl IntoView {
                 </ValidatedForm>
             </div>
             <div class="flex flex-1" />
+        </Show>
     }
 }

src/pages/student/athletics_page.rs

@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use crate::components::{MultiEntry, ValidatedForm};
+use crate::components::{Loading, MultiEntry, ValidatedForm};
 use crate::input;
 use crate::pages::student::form_setup::use_student_form;
 
@@ -8,6 +8,10 @@ pub fn StudentAthleticsPage() -> impl IntoView {
     let controller = use_student_form("athletics");
 
     view! {
+        <Show 
+            when=move || controller.data_resource.get().is_some()
+            fallback=Loading
+        >
             <div class="flex flex-1" />
             <div class="flex flex-col flex-2 mt-6">
                 <ValidatedForm title="Athletics Information" on_submit=controller.submit_action>
@@ -53,5 +57,6 @@ pub fn StudentAthleticsPage() -> impl IntoView {
                 </ValidatedForm>
             </div>
             <div class="flex flex-1" />
+        </Show>
     }
 }