card loader inside surface

Author: ramonsnir

src/ui/surfaces/SiteGeneralConfiguration.tsx

@@ -23,7 +23,11 @@ export const SiteGeneralConfiguration = () => {
   });
 
   if (siteSettingsQuery.isLoading) {
-    return <CardLoader />;
+    return (
+      <SiteGeneralConfigurationSurface>
+        <CardLoader />
+      </SiteGeneralConfigurationSurface>
+    );
   }
 
   return (
@@ -56,8 +60,24 @@ export const SiteGeneralConfiguration = () => {
         <hr />
         The code for this surface can be seen here:
         <ul>
-          <li>&nbsp;&nbsp;<Link href="https://github.com/netlify/extension-showcase/blob/main/src/ui/surfaces/SiteGeneralConfiguration.tsx" target="_blank">React UI code</Link></li>
-          <li>&nbsp;&nbsp;<Link href="https://github.com/netlify/extension-showcase/blob/main/src/server/router.ts" target="_blank">Server code</Link></li>
+          <li>
+            &nbsp;&nbsp;
+            <Link
+              href="https://github.com/netlify/extension-showcase/blob/main/src/ui/surfaces/SiteGeneralConfiguration.tsx"
+              target="_blank"
+            >
+              React UI code
+            </Link>
+          </li>
+          <li>
+            &nbsp;&nbsp;
+            <Link
+              href="https://github.com/netlify/extension-showcase/blob/main/src/server/router.ts"
+              target="_blank"
+            >
+              Server code
+            </Link>
+          </li>
         </ul>
       </Card>
     </SiteGeneralConfigurationSurface>

src/ui/surfaces/TeamConfiguration.tsx

@@ -22,7 +22,11 @@ export const TeamConfiguration = () => {
   });
 
   if (teamSettingsQuery.isLoading) {
-    return <CardLoader />;
+    return (
+      <TeamConfigurationSurface>
+        <CardLoader />
+      </TeamConfigurationSurface>
+    );
   }
 
   return (
@@ -48,8 +52,24 @@ export const TeamConfiguration = () => {
         <hr />
         The code for this surface can be seen here:
         <ul>
-          <li>&nbsp;&nbsp;<Link href="https://github.com/netlify/extension-showcase/blob/main/src/ui/surfaces/TeamConfiguration.tsx" target="_blank">React UI code</Link></li>
-          <li>&nbsp;&nbsp;<Link href="https://github.com/netlify/extension-showcase/blob/main/src/server/router.ts" target="_blank">Server code</Link></li>
+          <li>
+            &nbsp;&nbsp;
+            <Link
+              href="https://github.com/netlify/extension-showcase/blob/main/src/ui/surfaces/TeamConfiguration.tsx"
+              target="_blank"
+            >
+              React UI code
+            </Link>
+          </li>
+          <li>
+            &nbsp;&nbsp;
+            <Link
+              href="https://github.com/netlify/extension-showcase/blob/main/src/server/router.ts"
+              target="_blank"
+            >
+              Server code
+            </Link>
+          </li>
         </ul>
       </Card>
     </TeamConfigurationSurface>