remote validation trigger

src/views/record.tsx

···
     }
 
     const didDocument = await didDocPromise;
-
     const pdsEndpoint = getPdsEndpoint(didDocument);
 
     if (!pdsEndpoint) {
···
   const [validSchema, setValidSchema] = createSignal<boolean | undefined>(undefined);
   const [schema, setSchema] = createSignal<ResolvedSchema>();
   const [lexiconNotFound, setLexiconNotFound] = createSignal<boolean>();
+  const [remoteValidation, setRemoteValidation] = createSignal<boolean>();
   const did = params.repo;
   let rpc: Client;
 
···
 
   const validateRemoteSchema = async (record: Record<string, unknown>) => {
     try {
+      setRemoteValidation(true);
       const { resolved, failed } = await resolveAllLexicons(params.collection as Nsid);
 
       if (failed.size > 0) {
···
       setValidSchema(false);
       setValidationError(err.message || String(err));
     }
+    setRemoteValidation(false);
   };
 
   const verifyRecordIntegrity = async () => {
···
                 ></span>
               </div>
               <Show when={validRecord() === false}>
-                <div class="wrap-break-word">{verifyError()}</div>
+                <div class="text-xs wrap-break-word">{verifyError()}</div>
               </Show>
             </div>
             <div>
···
                     "iconify lucide--check text-green-500 dark:text-green-400":
                       validSchema() === true,
                     "iconify lucide--x text-red-500 dark:text-red-400": validSchema() === false,
-                    "iconify lucide--loader-circle animate-spin": validSchema() === undefined,
+                    "iconify lucide--loader-circle animate-spin":
+                      validSchema() === undefined && remoteValidation(),
                   }}
                 ></span>
               </div>
               <Show when={validSchema() === false}>
-                <div class="wrap-break-word">{validationError()}</div>
+                <div class="text-xs wrap-break-word">{validationError()}</div>
+              </Show>
+              <Show
+                when={
+                  !remoteValidation() &&
+                  validSchema() === undefined &&
+                  params.collection &&
+                  !(params.collection in lexicons)
+                }
+              >
+                <Button onClick={() => validateRemoteSchema(record()!.value)}>
+                  Validate remotely
+                </Button>
               </Show>
             </div>
             <Show when={lexiconUri()}>