<commit_before><template>
  <div class="search">
    <md-input-container>
      <label>Search For Module</label>
      <md-input v-model="activeQuery" @keydown.native="fetching = true" @keyup.native="search"></md-input>
    </md-input-container>
    <div v-if="fetching" class="loading">
      <p style="text-align:center;"><md-spinner :md-size="100" md-indeterminate></md-spinner></p>
    </div>
    <div v-if="!fetching" class="modules">
      <router-link v-for="mod in modules" :key="mod.code" :to="'/module/' + (mod.ref || mod.moduleID)">
        <md-card md-with-hover>
          <div class="header-colour"></div>
          <md-card-header><h2>{{ mod.code }}</h2></md-card-header>
          <md-card-content>
            <h3>{{ mod.name }}</h3>
          </md-card-content>
          <md-card-actions v-if="$root.loggedIn">
            <md-button class="md-icon-button" @click.prevent.native="favModule(mod.moduleID)">
              <md-icon>bookmark_border</md-icon>
            </md-button>
          </md-card-actions>
        </md-card>
      </router-link>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

import api from '@/js/api'

export default {
  name: 'Search',
  props: ['query'],
  data () {
    return {
      activeQuery: this.query,
      fetching: true,
      modules: []
    }
  },
  mounted () {
    if (this.activeQuery) this.search()
  },
  methods: {
    search: _.debounce(function () {
      if (!this.activeQuery) {
        this.fetching = false
        this.modules = []
        return
      }
      this.fetching = true
      api.get('search_modules', {
        query: this.activeQuery
      })
      .then(response => {
        this.fetching = false
        this.modules = response.data.result<commit_msg>Search route no longer shows spinner on mounted<commit_after><template>
  <div class="search">
    <md-input-container>
      <label>Search For Module</label>
      <md-input v-model="activeQuery" @keydown.native="fetching = true" @keyup.native="search"></md-input>
    </md-input-container>
    <div v-if="fetching" class="loading">
      <p style="text-align:center;"><md-spinner :md-size="100" md-indeterminate></md-spinner></p>
    </div>
    <div v-if="!fetching" class="modules">
      <router-link v-for="mod in modules" :key="mod.code" :to="'/module/' + (mod.ref || mod.moduleID)">
        <md-card md-with-hover>
          <div class="header-colour"></div>
          <md-card-header><h2>{{ mod.code }}</h2></md-card-header>
          <md-card-content>
            <h3>{{ mod.name }}</h3>
          </md-card-content>
          <md-card-actions v-if="$root.loggedIn">
            <md-button class="md-icon-button" @click.prevent.native="favModule(mod.moduleID)">
              <md-icon>bookmark_border</md-icon>
            </md-button>
          </md-card-actions>
        </md-card>
      </router-link>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

import api from '@/js/api'

export default {
  name: 'Search',
  props: ['query'],
  data () {
    return {
      activeQuery: this.query,
      fetching: false,
      modules: []
    }
  },
  mounted () {
    if (this.activeQuery) this.search()
  },
  methods: {
    search: _.debounce(function () {
      if (!this.activeQuery) {
        this.fetching = false
        this.modules = []
        return
      }
      this.fetching = true
      api.get('search_modules', {
        query: this.activeQuery
      })
      .then(response => {
        this.fetching = false
        this.modules = response.data.result
{'fraction_non_alphanumeric': 0.1803324880247957, 'fraction_numerical': 0.0039447731755424065, 'mean_word_length': 2.274907749077491, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 83, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5178571', 'n_tokens_mistral': 1207, 'n_tokens_neox': 1180, 'n_words': 208}