Merge pull request #602 from awcodes/fix/mentions-loader-styling

Fix: styling for mentions loader

Author: awcodes

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .idea
 .phpunit.result.cache
+.phpunit.cache/
 .vscode
 build
 composer.lock

.phpunit.cache/test-results

@@ -1 +1 @@
-{"version":"pest_2.35.1","defects":[],"times":{"P\\Tests\\src\\ArchTest::__pest_evaluable_it_will_not_use_debugging_functions":0.223,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_has_editor_field":0.099,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_creates_record":0.436,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_updates_record":0.418,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_can_create_null_record":0.303}}
+{"version":"pest_2.36.0","defects":[],"times":{"P\\Tests\\src\\ArchTest::__pest_evaluable_it_will_not_use_debugging_functions":0.135,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_has_editor_field":0.034,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_creates_record":0.329,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_updates_record":0.307,"P\\Tests\\src\\FormsTest::__pest_evaluable_it_can_create_null_record":0.277}}

resources/css/plugin.css

@@ -702,3 +702,15 @@ span[data-type="mergeTag"] {
 .tiptap-editor .mention  {
     @apply bg-primary-600 bg-opacity-10 text-primary-600 px-1 py-0.5 rounded-md box-decoration-clone;
 }
+
+.mention-dropdown .loader {
+    @apply animate-spin size-4 text-white;
+
+    .circle {
+        @apply opacity-25;
+    }
+
+    .path {
+        @apply opacity-75;
+    }
+}

resources/dist/filament-tiptap-editor.css

@@ -60,9 +60,9 @@ export default (props, emptyMentionItemsMessage, mentionItemsPlaceholder, mentio
     <template x-if="isLoading && ! (mentionItemsPlaceholder && !query.length)">
       <div>
         <div class="px-2 py-1" x-show="!mentionItemsLoading">
-          <svg class="animate-spin size-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          <svg class="loader" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="circle" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="path" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
         </div>
         <p x-text="mentionItemsLoading"></p>